/* BookBella - Flaticon Uicons Integration */
/* CDN: https://cdn-uicons.flaticon.com/ */

/* Import Uicons - Regular Rounded Style */
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css');

/* Alternative: Bold Rounded Style (descomente se preferir) */
/* @import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-bold-rounded/css/uicons-bold-rounded.css'); */

/* Alternative: Solid Rounded Style (descomente se preferir) */
/* @import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css'); */

/* ============================================
   BASE ICON STYLES
   ============================================ */
.fi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    line-height: 1;
}

/* Icon Sizes */
.fi-xs { font-size: 12px; }
.fi-sm { font-size: 14px; }
.fi-md { font-size: 18px; }
.fi-lg { font-size: 24px; }
.fi-xl { font-size: 32px; }
.fi-2xl { font-size: 40px; }

/* Icon Colors */
.fi-navy { color: #001F5C; }
.fi-pink { color: #FF85A2; }
.fi-pink-dark { color: #FF5C85; }
.fi-white { color: #FFFFFF; }

/* Animated Icons */
.fi-spin {
    animation: fi-spin 2s linear infinite;
}

@keyframes fi-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fi-pulse {
    animation: fi-pulse 1.5s ease-in-out infinite;
}

@keyframes fi-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Icon with Background */
.fi-box {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF85A2, #FF5C85);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.fi-box-lg {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

/* Icon Input Addon */
.fi-input-icon {
    position: absolute;
    left: 16px;
    color: #001F5C;
    opacity: 0.5;
    font-size: 18px;
    z-index: 2;
    pointer-events: none;
}

/* ============================================
   ICON MAPPING GUIDE
   ============================================
   
   COMMON UI ICONS:
   ----------------
   User:                fi fi-rr-user
   Email:               fi fi-rr-envelope
   Password/Lock:       fi fi-rr-lock
   Phone:               fi fi-rr-phone-call
   Calendar:            fi fi-rr-calendar
   Clock:               fi fi-rr-clock
   Home/Salon:          fi fi-rr-home
   Checkmark:           fi fi-rr-check
   Cross/X:             fi fi-rr-cross
   Arrow Left:          fi fi-rr-arrow-left
   Arrow Right:         fi fi-rr-arrow-right
   Eye (show):          fi fi-rr-eye
   Eye Crossed (hide):  fi fi-rr-eye-crossed
   Menu:                fi fi-rr-menu-burger
   Settings:            fi fi-rr-settings
   Logout:              fi fi-rr-sign-out
   Search:              fi fi-rr-search
   Plus/Add:            fi fi-rr-plus
   Minus/Remove:        fi fi-rr-minus
   Edit:                fi fi-rr-pencil
   Delete:              fi fi-rr-trash
   Save:                fi fi-rr-disk
   Download:            fi fi-rr-download
   Upload:              fi fi-rr-upload
   Bell/Notification:   fi fi-rr-bell
   Star/Favorite:       fi fi-rr-star
   Heart/Like:          fi fi-rr-heart
   Share:               fi fi-rr-share
   Print:               fi fi-rr-print
   Filter:              fi fi-rr-filter
   Sort:                fi fi-rr-sort
   List:                fi fi-rr-list
   Grid:                fi fi-rr-apps
   
   BUSINESS/SALON ICONS:
   ---------------------
   Scissors/Hair:       fi fi-rr-scissors
   Spray Bottle:        fi fi-rr-spray-can
   Mirror:              fi fi-rr-mirror
   Sparkles/Beauty:     fi fi-rr-sparkles
   Crown/Premium:       fi fi-rr-crown
   Credit Card:         fi fi-rr-credit-card
   Money:               fi fi-rr-money
   Receipt:             fi fi-rr-receipt
   Chart/Stats:         fi fi-rr-chart-pie
   Briefcase:           fi fi-rr-briefcase
   
   SOCIAL ICONS:
   -------------
   Facebook:            fi fi-brands-facebook
   Instagram:           fi fi-brands-instagram
   WhatsApp:            fi fi-brands-whatsapp
   Twitter:             fi fi-brands-twitter
   Google:              fi fi-brands-google
   
   USAGE EXAMPLE:
   -------------
   <i class="fi fi-rr-user fi-lg fi-pink"></i>
   <i class="fi fi-rr-envelope fi-input-icon"></i>
   <span class="fi-box"><i class="fi fi-rr-calendar"></i></span>
   
*/