/* Font Awesome 6 Pro Base Classes */
[class^="ti-"]:before,
[class*=" ti-"]:before {
    font-family: "Font Awesome 6 Sharp";
    font-weight: 300;
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Light weight icons (Font Awesome Pro feature) */
.ti-light:before {
    font-weight: 300;
}

/* Regular weight icons */
.ti-regular:before {
    font-weight: 400;
}

/* DearFlip Specific Icon Mappings */
/* Navigation & Control Icons */
.ti-angle-right:before { content: "\f105"; } /* fa-angle-right */
.ti-angle-left:before { content: "\f104"; } /* fa-angle-left */
.ti-angle-double-right:before { content: "\f101"; } /* fa-angle-double-right */
.ti-angle-double-left:before { content: "\f100"; } /* fa-angle-double-left */
.ti-angle-up:before { content: "\f106"; } /* fa-angle-up */
.ti-angle-down:before { content: "\f107"; } /* fa-angle-down */

/* Media Controls */
.ti-control-play:before { content: "\f04b"; } /* fa-play */
.ti-control-pause:before { content: "\f04c"; } /* fa-pause */
.ti-control-stop:before { content: "\f04d"; } /* fa-stop */
.ti-control-forward:before { content: "\f04e"; } /* fa-forward */
.ti-control-backward:before { content: "\f04a"; } /* fa-backward */

/* Common UI Icons */
.ti-search:before { content: "\f002"; } /* fa-search */
.ti-zoom-in:before { content: "\f00e"; } /* fa-search-plus */
.ti-zoom-out:before { content: "\f010"; } /* fa-search-minus */
.ti-fullscreen:before { content: "\f065"; } /* fa-expand */
.ti-close:before { content: "\f00d"; } /* fa-times */
.ti-menu:before { content: "\f0c9"; } /* fa-bars */
.ti-menu-alt:before { content: "\f0c9"; } /* fa-bars */
.ti-more:before { content: "\f141"; } /* fa-ellipsis-h */
.ti-more-alt:before { content: "\f142"; } /* fa-ellipsis-v */

/* File & Document Icons */
.ti-book:before { content: "\f02d"; } /* fa-book */
.ti-file:before { content: "\f15b"; } /* fa-file */
.ti-download:before { content: "\f019"; } /* fa-download */
.ti-upload:before { content: "\f093"; } /* fa-upload */
.ti-save:before { content: "\f0c7"; } /* fa-save */

/* Layout & View Icons */
.ti-layout-grid2:before { content: "\f009"; } /* fa-th */
.ti-layout-grid3:before { content: "\f009"; } /* fa-th */
.ti-layout-grid4:before { content: "\f009"; } /* fa-th */
.ti-view-list:before { content: "\f0ca"; } /* fa-list-ul */
.ti-view-grid:before { content: "\f009"; } /* fa-th */

/* Social Media Icons */
.ti-facebook:before { content: "\f09a"; } /* fab fa-facebook */
.ti-twitter:before { content: "\f099"; } /* fab fa-twitter */
.ti-twitter-alt:before { content: "\f099"; } /* fab fa-twitter */
.ti-google:before { content: "\f1a0"; } /* fab fa-google */
.ti-email:before { content: "\f0e0"; } /* fa-envelope */
.ti-envelope:before { content: "\f0e0"; } /* fa-envelope */
.ti-share:before { content: "\f064"; } /* fa-share */
.ti-sharethis:before { content: "\f1e0"; } /* fa-share-alt */
.ti-sharethis-alt:before { content: "\f1e0"; } /* fa-share-alt */

/* Audio & Sound Icons */
.ti-volume:before { content: "\f028"; } /* fa-volume-up */
.ti-music:before { content: "\f001"; } /* fa-music */
.ti-microphone:before { content: "\f130"; } /* fa-microphone */

/* Utility Icons */
.ti-settings:before { content: "\f013"; } /* fa-cog */
.ti-help:before { content: "\f128"; } /* fa-question */
.ti-help-alt:before { content: "\f059"; } /* fa-question-circle */
.ti-info:before { content: "\f129"; } /* fa-info */
.ti-info-alt:before { content: "\f05a"; } /* fa-info-circle */
.ti-bell:before { content: "\f0f3"; } /* fa-bell */
.ti-alert:before { content: "\f071"; } /* fa-exclamation-triangle */

/* Arrow Icons */
.ti-arrow-up:before { content: "\f062"; } /* fa-arrow-up */
.ti-arrow-down:before { content: "\f063"; } /* fa-arrow-down */
.ti-arrow-left:before { content: "\f060"; } /* fa-arrow-left */
.ti-arrow-right:before { content: "\f061"; } /* fa-arrow-right */
.ti-arrows-corner:before { content: "\f065"; } /* fa-expand */
.ti-arrows-horizontal:before { content: "\f07e"; } /* fa-arrows-h */
.ti-arrows-vertical:before { content: "\f07d"; } /* fa-arrows-v */

/* User & Account Icons */
.ti-user:before { content: "\f007"; } /* fa-user */
.ti-lock:before { content: "\f023"; } /* fa-lock */
.ti-unlock:before { content: "\f09c"; } /* fa-unlock */
.ti-key:before { content: "\f084"; } /* fa-key */

/* Status Icons */
.ti-check:before { content: "\f00c"; } /* fa-check */
.ti-check-box:before { content: "\f14a"; } /* fa-check-square */
.ti-plus:before { content: "\f067"; } /* fa-plus */
.ti-minus:before { content: "\f068"; } /* fa-minus */
.ti-trash:before { content: "\f1f8"; } /* fa-trash */

/* Specific DearFlip UI Icons */
.ti-layout-sidebar-left:before { content: "\f0c9"; } /* fa-bars */
.ti-layout-sidebar-right:before { content: "\f0c9"; } /* fa-bars */
.ti-panel:before { content: "\f0c9"; } /* fa-bars */

/* Brand Icons (use fab font-family) */
.ti-facebook:before,
.ti-twitter:before,
.ti-twitter-alt:before,
.ti-google:before,
.ti-youtube:before,
.ti-linkedin:before,
.ti-instagram:before,
.ti-pinterest:before,
.ti-github:before,
.ti-apple:before,
.ti-android:before,
.ti-microsoft:before,
.ti-wordpress:before {
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free";
    font-weight: 400;
}

/* Additional Pro Icons (Light weight) */
.ti-book.ti-light:before { content: "\f02d"; font-weight: 300; }
.ti-file.ti-light:before { content: "\f15b"; font-weight: 300; }
.ti-folder.ti-light:before { content: "\f07b"; font-weight: 300; }
.ti-image.ti-light:before { content: "\f03e"; font-weight: 300; }

/* Custom DearFlip specific mappings */
.df-ui-thumbnail .ti-layout-grid2:before { content: "\f009"; } /* thumbnails */
.df-ui-outline .ti-menu-alt:before { content: "\f0ca"; } /* outline/bookmark */
.df-ui-sound .ti-volume:before { content: "\f028"; } /* sound */
.df-ui-fullscreen .ti-fullscreen:before { content: "\f065"; } /* fullscreen */
.df-ui-share .ti-share:before { content: "\f1e0"; } /* share */
.df-ui-download .ti-download:before { content: "\f019"; } /* download */
.df-ui-help .ti-help-alt:before { content: "\f059"; } /* help */
.df-ui-more .ti-more-alt:before { content: "\f142"; } /* more options */

/* Navigation specific icons */
.df-ui-next .ti-angle-right:before { content: "\f105"; }
.df-ui-prev .ti-angle-left:before { content: "\f104"; }
.df-ui-alt.df-ui-next .ti-angle-right:before { content: "\f105"; }
.df-ui-alt.df-ui-prev .ti-angle-left:before { content: "\f104"; }

/* Page mode icons */
.df-ui-pagemode .ti-book:before { content: "\f02d"; } /* book view */
.df-ui-pagemode .ti-file:before { content: "\f15c"; } /* single page view */

/* Start/End page icons */
.df-ui-start .ti-angle-double-left:before { content: "\f100"; }
.df-ui-end .ti-angle-double-right:before { content: "\f101"; }

/* Play/Pause for autoplay */
.df-ui-play .ti-control-play:before { content: "\f04b"; }
.df-ui-play .ti-control-pause:before { content: "\f04c"; }

/* Zoom controls */
.df-ui-zoomin .ti-zoom-in:before { content: "\f00e"; }
.df-ui-zoomout .ti-zoom-out:before { content: "\f010"; }

/* Close button for lightbox */
.df-lightbox-close .ti-close:before { content: "\f00d"; }
.df-ui-sidemenu-close .ti-close:before { content: "\f00d"; }

/* Outline toggle arrows */
.df-outline-toggle:before { content: "\f107"; } /* down arrow */
.df-outline-toggle.df-outlines-hidden:before { content: "\f105"; } /* right arrow */

/* RTL Support */
.df-rtl .df-outline-toggle.df-outlines-hidden:before { content: "\f104"; } /* left arrow in RTL */

/* Fallback for any unmapped icons */
/*[class^="ti-"]:before,
[class*=" ti-"]:before {
    /* If icon not specifically mapped, use a generic icon */
    content: "\f013"; /* fa-cog as fallback */
}*/

/* Pro-specific enhancements */
@supports (font-variation-settings: normal) {
    /* Use variable font features if available */
    [class^="ti-"]:before,
    [class*=" ti-"]:before {
        font-variation-settings: "wght" 900;
    }
    
    .ti-light:before {
        font-variation-settings: "wght" 300;
    }
    
    .ti-regular:before {
        font-variation-settings: "wght" 400;
    }
}