/* Universal Icon Fixes for Prekly Website
   Author: Prekly Team
   Description: Fixes for icon visibility across both LTR and RTL layouts
*/

/* CSS Variables for Brand Colors */
:root {
    --color-brand-primary: #4a154b;
    --color-brand-secondary: #2eb67d;
    --color-brand-accent: #007bff;
}

/* Counter Section Fixes for Both RTL and LTR */
.section-counter .counter {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
}

html[dir="rtl"] .section-counter .counter {
    flex-direction: row-reverse;
}

html[dir="ltr"] .section-counter .counter {
    flex-direction: row;
}

/* Force Element Order in RTL */
html[dir="rtl"] .counter .icon-wrap {
    order: 2;
}

html[dir="rtl"] .counter .counter-text {
    order: 1;
}

.section-counter .icon-wrap {
    flex-shrink: 0;
    margin-right: 15px;
}

html[dir="rtl"] .section-counter .icon-wrap {
    margin-left: 15px;
    margin-right: 0;
}

.section-counter .counter-text {
    flex: 1;
}

html[dir="rtl"] .section-counter .counter-text {
    text-align: right;
}

html[dir="ltr"] .section-counter .counter-text {
    text-align: left;
}

/* Ensure Icons Are Visible in Both RTL and LTR */
.icon-wrap span[class^="icon-"],
.icon-wrap span[class*=" icon-"],
.custom-icon-wrap span[class^="icon-"],
.custom-icon-wrap span[class*=" icon-"],
.custom-icon-wrap span[class^="flaticon-"],
.custom-icon-wrap span[class*=" flaticon-"] {
    font-family: 'icomoon' !important;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
    font-variant: normal;
    text-transform: none;
}

/* FontAwesome Icon Fixes - Ensure they work properly */
.fa,
i[class^="fa-"],
i[class*=" fa-"] {
    font-family: 'FontAwesome' !important;
    display: inline-block !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    speak: none !important;
    font-variant: normal !important;
    text-transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-rendering: auto !important;
}

/* Specific Icon Content - Ensure They Show in Both Directions */
.icon-anchor:before {
    content: "\f13d" !important;
}

.icon-calendar:before {
    content: "\f073" !important;
}

.icon-key:before {
    content: "\f084" !important;
}

.icon-user:before {
    content: "\f007" !important;
}

/* FontAwesome Specific Icon Content - Ensure all icons display properly */
.fa-play-circle:before {
    content: "\f144" !important;
}

.fa-calendar:before {
    content: "\f073" !important;
}

.fa-gift:before {
    content: "\f06b" !important;
}

.fa-th-list:before {
    content: "\f00b" !important;
}

.fa-globe:before {
    content: "\f0ac" !important;
}

.fa-times:before {
    content: "\f00d" !important;
}

.fa-check:before {
    content: "\f00c" !important;
}

.fa-arrow-up:before {
    content: "\f062" !important;
}

.fa-bars:before {
    content: "\f0c9" !important;
}

.fa-angle-left:before {
    content: "\f104" !important;
}

.fa-angle-right:before {
    content: "\f105" !important;
}

.fa-user:before {
    content: "\f007" !important;
}

.fa-eye:before {
    content: "\f06e" !important;
}

.fa-share-alt:before {
    content: "\f1e0" !important;
}

.fa-facebook:before {
    content: "\f09a" !important;
}

.fa-twitter:before {
    content: "\f099" !important;
}

.fa-linkedin:before {
    content: "\f0e1" !important;
}

.fa-link:before {
    content: "\f0c1" !important;
}

.fa-spinner:before {
    content: "\f110" !important;
}

.fa-search:before {
    content: "\f002" !important;
}

.fa-newspaper-o:before {
    content: "\f1ea" !important;
}

.fa-fire:before {
    content: "\f06d" !important;
}

.fa-exclamation-triangle:before {
    content: "\f071" !important;
}

.fa-paper-plane:before {
    content: "\f1d8" !important;
}

.fa-language:before {
    content: "\f1ab" !important;
}

.fa-info-circle:before {
    content: "\f05a" !important;
}

.fa-rocket:before {
    content: "\f135" !important;
}

.fa-clock:before {
    content: "\f017" !important;
}

.fa-chevron-left:before {
    content: "\f053" !important;
}

.fa-chevron-right:before {
    content: "\f054" !important;
}

.fa-calendar-check:before {
    content: "\f274" !important;
}

.fa-shield:before {
    content: "\f132" !important;
}

.fa-file-text:before {
    content: "\f15c" !important;
}

.fa-handshake-o:before {
    content: "\f2b5" !important;
}

.fa-cookie-bite:before {
    content: "\f564" !important;
}

.fa-home:before {
    content: "\f015" !important;
}

.fa-users:before {
    content: "\f0c0" !important;
}

.fa-building:before {
    content: "\f1ad" !important;
}

.fa-hdd-o:before {
    content: "\f0a0" !important;
}

.fa-mobile:before {
    content: "\f10b" !important;
}

.fa-bar-chart:before {
    content: "\f080" !important;
}

.fa-code:before {
    content: "\f121" !important;
}

.fa-database:before {
    content: "\f1c0" !important;
}

.fa-envelope:before {
    content: "\f0e0" !important;
}

.fa-life-ring:before {
    content: "\f1cd" !important;
}

.fa-tag:before {
    content: "\f02b" !important;
}

.fa-minus:before {
    content: "\f068" !important;
}

.fa-angle-right:before {
    content: "\f105" !important;
}

.fa-close:before {
    content: "\f00d" !important;
}

/* Icon Wrap Fixes for Both Directions */
.icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.custom-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    width: 60px;
    height: 60px;
    background: var(--color-brand-secondary);
    border-radius: 50%;
    flex-shrink: 0;
    color: white;
}

/* Additional Icon Fixes for Flaticon */
.custom-icon-wrap span[class^="flaticon-"]:before,
.custom-icon-wrap span[class*=" flaticon-"]:before {
    font-family: 'Flaticon' !important;
}

.icon-wrap span[class^="flaticon-"]:before,
.icon-wrap span[class*=" flaticon-"]:before {
    font-family: 'Flaticon' !important;
}

/* Ensure Counter Numbers and Text Alignment */
.counter-text {
    flex: 1;
}

.counter-text .number {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 5px;
}

.counter-text span {
    display: block;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.3;
}

/* Force Font Loading for Icons */
.icon-wrap span,
.custom-icon-wrap span {
    position: relative;
    z-index: 1;
}

/* Ensure Icons Have Proper Display Properties */
[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Services Section Icons */
.service .custom-icon-wrap {
    margin-bottom: 20px;
}

.service .custom-icon-wrap span {
    font-size: 2rem;
}

/* Image Absolute Box Icon */
.image-absolute-box .box .icon-wrap {
    background: var(--color-brand-secondary);
    color: white;
    margin-bottom: 15px;
}

.image-absolute-box .box .icon-wrap span {
    color: white;
}

/* Debug: Force visibility for troubleshooting */
.section-counter .icon-wrap span {
    visibility: visible !important;
    opacity: 1 !important;
}

.custom-icon-wrap span {
    visibility: visible !important;
    opacity: 1 !important;
}