/**
 * @file plugins/themes/ogprime/styles/ogprime.css
 *
 * Copyright (c) 2024 Ogprime Theme
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Additional styles for Ogprime theme to ensure proper asset loading
 */

/* FontAwesome Icon Fix - Ensure icons display properly */
.fab, .fas, .far, .fal, .fad, .fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}

/* Specific FontAwesome brand icons */
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Ensure all FontAwesome icons display properly */
i[class*="fa-"], 
span[class*="fa-"],
.fa, .fas, .far, .fab, .fal, .fad {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}

/* Ensure social icons display properly */
.social-icons i {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Force FontAwesome icons to show with comprehensive coverage */
.fa-facebook-f:before { content: "\f39e" !important; }
.fa-x-twitter:before { content: "\f099" !important; } /* Use Twitter icon as fallback */
.fa-twitter:before { content: "\f099" !important; }
.fa-linkedin-in:before { content: "\f0e1" !important; }
.fa-instagram:before { content: "\f16d" !important; }
.fa-bars:before { content: "\f0c9" !important; }
.fa-times:before { content: "\f00d" !important; }
.fa-chevron-down:before { content: "\f078" !important; }
.fa-chevron-up:before { content: "\f077" !important; }
.fa-search:before { content: "\f002" !important; }
.fa-angle-left:before { content: "\f104" !important; }
.fa-angle-right:before { content: "\f105" !important; }

/* Ensure all FontAwesome classes work */
[class*="fa-"]:before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Brand icons specific weight */
.fab:before,
[class*="fa-facebook"]:before,
[class*="fa-twitter"]:before,
[class*="fa-linkedin"]:before,
[class*="fa-instagram"]:before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Additional Twitter icon fixes */
.social-icons-x i,
.social-icons-twitter i {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.social-icons-x i:before,
.social-icons-twitter i:before {
    content: "\f099" !important; /* Twitter icon */
}

/* Owl Carousel Navigation Icons Fix - Preserve Porto positioning */
.owl-carousel .owl-nav {
    position: absolute !important;
    top: 50% !important;
    width: 100% !important;
    z-index: 10 !important;
}

.owl-nav button.owl-prev,
.owl-nav button.owl-next,
.owl-nav .owl-prev,
.owl-nav .owl-next {
    display: inline-block !important;
    position: absolute !important;
    background: rgba(0,0,0,0.5) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 0 !important; /* Hide any text */
    transform: translateY(-50%) !important;
}

.owl-nav button.owl-prev,
.owl-nav .owl-prev {
    left: 15px !important;
}

.owl-nav button.owl-next,
.owl-nav .owl-next {
    right: 15px !important;
    left: auto !important;
}

/* For nav-inside-plus class */
.owl-carousel.nav-inside-plus .owl-nav button.owl-prev,
.owl-carousel.nav-inside-plus .owl-nav .owl-prev {
    left: 30px !important;
}

.owl-carousel.nav-inside-plus .owl-nav button.owl-next,
.owl-carousel.nav-inside-plus .owl-nav .owl-next {
    right: 30px !important;
}

.owl-nav button.owl-prev:before,
.owl-nav button.owl-next:before,
.owl-nav .owl-prev:before,
.owl-nav .owl-next:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    display: inline-block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
}

.owl-nav button.owl-prev:before,
.owl-nav .owl-prev:before {
    content: "\f104" !important; /* fa-angle-left */
}

.owl-nav button.owl-next:before,
.owl-nav .owl-next:before {
    content: "\f105" !important; /* fa-angle-right */
}

/* Simple Line Icons Fix for magnifier */
.icons.icon-magnifier {
    font-family: "simple-line-icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    speak: none !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
}

.icons.icon-magnifier:before {
    content: "\e090" !important;
}

/* Fallback for magnifier icon using FontAwesome if Simple Line Icons fails */
.header-nav-features-search-show-icon .icons.icon-magnifier {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.header-nav-features-search-show-icon .icons.icon-magnifier:before {
    font-family: "Font Awesome 6 Free" !important;
    content: "\f002" !important; /* fa-search */
    font-weight: 900 !important;
}

/* Additional FontAwesome icon fixes */
.header-social-icons i,
.social-icons i {
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure header navigation icons work */
.header-nav-features i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Hide duplicate chevron icons - only show the Porto theme's original ::after chevron */
#header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-chevron-down,
#header .header-nav-main nav > ul > li > a.dropdown-toggle i[class*="chevron"] {
    display: none !important;
}

/* Ensure only the Porto theme's ::after pseudo-element chevron shows */
#header .header-nav-main-arrows nav > ul > li > a.dropdown-toggle:after {
    font-family: "Font Awesome 6 Free" !important;
}

/* Specific overrides for common Porto CSS selectors that use Font Awesome 7 */
.owl-carousel .owl-nav button.owl-prev:before,
.owl-carousel .owl-nav button.owl-next:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* General fix for any Font Awesome 7 references */
[style*="Font Awesome 7"]:before,
[style*="Font Awesome 7"]:after {
    font-family: "Font Awesome 6 Free" !important;
}

/* Ensure all background images use correct paths */
.custom-slider-background-image-item {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Fix any potential path issues */
.appear-animation {
    opacity: 1;
}

/* Ensure proper loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-overlay-showing .loading-overlay {
    display: flex;
}

/* Bounce loader animation */
.bounce-loader {
    display: flex;
    justify-content: center;
}

.bounce-loader > div {
    width: 18px;
    height: 18px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bounce-loader .bounce1 {
    animation-delay: -0.32s;
}

.bounce-loader .bounce2 {
    animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        transform: scale(0);
    } 40% { 
        transform: scale(1.0);
    }
}