/* ==========================================
   CD-SYSTEM BASE - CUSTOM STYLES
   ========================================== */

/* Typography - Apply theme fonts globally - MAXIMUM SPECIFICITY */
html body,
html .body,
body,
.body {
    font-family: var(--font-family-primary, 'Montserrat', sans-serif) !important;
}

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html .body h1, html .body h2, html .body h3, html .body h4, html .body h5, html .body h6,
body h1, body h2, body h3, body h4, body h5, body h6,
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6,
h1, h2, h3, h4, h5, h6,
.heading-font,
.font-weight-bold,
.font-weight-black,
.font-weight-semibold,
.font-weight-extra-bold,
.btn {
    font-family: var(--font-family-secondary, var(--font-family-primary, 'Montserrat'), sans-serif) !important;
}

.body-font, p, .text, .content, .lead {
    font-family: var(--font-family-tertiary, var(--font-family-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));
}

/* Back to Top Button - Porto Plugin Override */
html .scroll-to-top {
	position: fixed;
	bottom: 100px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: var(--primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 9999;
	box-shadow: 0 4px 15px rgba(0,136,204,0.3);
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	min-width: 50px;
	padding: 0;
	text-decoration: none;
}

/* Forzar visibilidad en mobile incluso si tiene hidden-mobile */
@media (max-width: 991px) {
	html .scroll-to-top.hidden-mobile {
		display: flex !important;
	}
}

html .scroll-to-top:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,136,204,0.4);
	color: #fff;
	opacity: 1;
}

html .scroll-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

html .scroll-to-top i {
	font-size: 1.2rem;
	line-height: 1;
}

/* Header Semi-transparent - Removed override that was interfering with demo transparency */

/* Loading Overlay Improvements */
.loading-overlay {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.custom-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.logo-loader {
    animation: scaleBounce 0.8s infinite ease-in-out;
    margin-bottom: 2rem;
}

.loading-text {
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    margin-top: 1rem;
}

@keyframes scaleBounce {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Mobile Navigation Improvements */
@media (max-width: 991px) {
    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active #header .header-nav-main nav {
        transform: translateX(0);
    }


}

/* Newsletter Form Improvements */
.newsletter-form .input-group {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.newsletter-form .form-control {
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.1em;
}

.newsletter-form .btn {
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Alert Improvements */
.alert {
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.alert-success {
    background: linear-gradient(135deg, #28A745 0%, #20C997 100%);
    color: #fff;
}

.alert-danger {
    background: linear-gradient(135deg, #DC3545 0%, #FD7E14 100%);
    color: #fff;
}

/* Card Hover Effects */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Button Improvements */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Progress Bar Improvements */
.progress {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    overflow: hidden;
    height: 10px;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Social Icons Improvements */
.social-icons a {
    position: relative;
    overflow: hidden;
}

.social-icons a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary);
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.social-icons a:hover::before {
    transform: scale(1);
}

.social-icons a i {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.social-icons a:hover i {
    color: #fff;
}

/* Typography Improvements */
.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Improvements */
.section-with-bg {
    position: relative;
    overflow: hidden;
}

.section-with-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    opacity: 0.3;
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Improvements */
@media (max-width: 767px) {
	html .scroll-to-top {
		bottom: 90px;
		right: 20px;
		width: 45px;
		height: 45px;
	}

	html .scroll-to-top i {
		font-size: 1.1rem;
	}
}

@media (max-width: 575px) {
	html .scroll-to-top {
		bottom: 80px;
		right: 15px;
		width: 42px;
		height: 42px;
	}

	html .scroll-to-top i {
		font-size: 1rem;
	}
}

@media (max-width: 575px) {
	.newsletter-form .btn {
		padding: 0.8rem 1.5rem;
		font-size: 1em;
	}
}

/* Print Styles */
@media print {
    .back-to-top,
    .style-switcher-open-loader,
    .loading-overlay {
        display: none !important;
    }
}