/* Luxury Hotel Icons Library */
:root {
    --icon-primary: #2C3E50;
    --icon-hover: #3498DB;
    --icon-size: 24px;
    --animation-time: 0.3s;
}

/* Base Icon Style */
.icon {
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--icon-primary);
    transition: background-color var(--animation-time) ease;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 18px;
    color: var(--icon-color);
    transition: all var(--transition-time) ease;
    position: relative;
    vertical-align: middle;
    margin: 0 3px;
}

/* Hover Effect */
.luxury-icon:hover {
    filter: drop-shadow(var(--hover-shadow));
    transform: scale(1.1);
}

/* Premium Icons */
.luxury-icon-premium {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.luxury-icon-premium:hover {
    filter: drop-shadow(var(--hover-shadow));
    transform: scale(1.15);
}

/* Views Icons - Custom SVG Paths */
.icon-bosphorus-view {
    /* إطلالة البوسفور - إسطنبول */
    --icon-path: path('M10,10 C15,8 20,8 25,10 L25,20 L10,20 Z');
}

.icon-nile-view {
    /* إطلالة النيل - القاهرة */
    --icon-path: path('M5,15 Q15,5 25,15 L25,20 L5,20 Z');
}

.icon-haram-view {
    /* إطلالة الحرم - مكة */
    --icon-path: path('M15,5 L25,15 L5,15 Z');
}

.icon-alps-view {
    /* إطلالة جبال الألب - سويسرا */
    --icon-path: path('M5,20 L10,10 L15,15 L20,5 L25,20 Z');
}

/* Amenity Icons */
.icon-royal-spa {
    /* سبا ملكي */
    --icon-path: path('M12,5 A7,7 0 0,1 19,12 A7,7 0 0,1 12,19 A7,7 0 0,1 5,12 A7,7 0 0,1 12,5 Z');
}

.icon-fine-dining {
    /* مطعم فاخر */
    --icon-path: path('M5,19 L15,9 A5,5 0 0,1 20,4 L19,5 L20,4');
}

.icon-vip-concierge {
    /* خدمة كونسيرج VIP */
    --icon-path: path('M12,1 L15,8 L23,8 L16,13 L19,21 L12,16 L5,21 L8,13 L1,8 L9,8 Z');
}

/* Animation Effects */
@keyframes gentle-glow {
    0% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); }
    50% { filter: drop-shadow(0 0 8px var(--glow-color)); }
    100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); }
}

.luxury-icon-animated {
    animation: gentle-glow 3s infinite;
}

/* Responsive Sizes */
@media (max-width: 768px) {
    .luxury-icon {
        width: 20px;
        height: 20px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --icon-color: #fff;
        --glow-color: rgba(255, 255, 255, 0.6);
    }
}

/* Luxury City Icons */
.icon-istanbul {
  --icon-color: linear-gradient(45deg, #00416A, #E4E5E6);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L2 8l10 6 10-6-10-6zM12 22l-10-6V8l10 6v8z'/%3E%3C/svg%3E");
}

.icon-cairo {
  --icon-color: linear-gradient(45deg, #C79081, #DFA579);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L2 8v8l10 6 10-6V8L12 2z M12 6l-4 2v4l4 2 4-2V8l-4-2z'/%3E%3C/svg%3E");
}

.icon-makkah {
  --icon-color: linear-gradient(45deg, #24C6DC, #514A9D);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2v20M2 12h20'/%3E%3C/svg%3E");
}

.icon-swiss {
  --icon-color: linear-gradient(45deg, #CC95C0, #DBD4B4, #7AA1D2);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L3 9l9 4 9-4-9-7zM3 9v6l9 7 9-7V9l-9 4-9-4z'/%3E%3C/svg%3E");
}

/* Luxury View Icons */
.icon-sea-view {
  --icon-color: linear-gradient(45deg, #1CB5E0, #000046);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 15c2.5-2.5 6.5-2.5 9 0s6.5 2.5 9 0'/%3E%3Cpath d='M3 19c2.5-2.5 6.5-2.5 9 0s6.5 2.5 9 0'/%3E%3C/svg%3E");
}

.icon-mountain-view {
  --icon-color: linear-gradient(45deg, #5D4157, #A8CABA);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3l4 8 4-8M3 21l9-18 9 18H3z'/%3E%3C/svg%3E");
}

.icon-city-view {
  --icon-color: linear-gradient(45deg, #3C3B3F, #605C3C);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13M9 9h6M9 13h6M9 17h6'/%3E%3C/svg%3E");
}

/* Luxury Amenity Icons */
.icon-royal-spa {
  --icon-color: linear-gradient(45deg, #EACDA3, #D6AE7B);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-1.5 1.5-3 3-3 5s1.5 3.5 3 3.5 3-1.5 3-3.5-1.5-3.5-3-5zM12 14c-3.87 0-7 1.79-7 4v3h14v-3c0-2.21-3.13-4-7-4z'/%3E%3C/svg%3E");
}

.icon-fine-dining {
  --icon-color: linear-gradient(45deg, #BA8B02, #181818);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v2H3v-2zm4-12h2v8H7V6zm4 0h2v8h-2V6zm4 0h2v8h-2V6z'/%3E%3C/svg%3E");
}

.icon-vip-service {
  --icon-color: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* Base Icon Styles */
[class^="icon-"] {
  display: inline-block;
  width: 24px;
  height: 24px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background: var(--icon-color, #000);
  transition: all 0.3s ease;
}

/* Hover Effects */
[class^="icon-"]:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px currentColor);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  [class^="icon-"] {
    --icon-color: linear-gradient(45deg, #ffffff, #e0e0e0);
  }
}

/* Responsive Sizes */
@media (max-width: 768px) {
  [class^="icon-"] {
    width: 20px;
    height: 20px;
  }
}

/* RTL Support */
[dir="rtl"] [class^="icon-"] {
  transform: scaleX(-1);
}
[dir="rtl"] [class^="icon-"]:hover {
  transform: scaleX(-1) scale(1.1);
}

/* Room Types Icons */
.icon-suite {
  --icon-color: linear-gradient(45deg, #DAA520, #FFD700);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 9V6c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v3c-1.1 0-2 .9-2 2v5h1.33L4 18h1l.67-2h12.67l.66 2h1l.67-2H22v-5c0-1.1-.9-2-2-2zm-14 0V6h12v3H6z'/%3E%3C/svg%3E");
}

.icon-deluxe {
  --icon-color: linear-gradient(45deg, #8E2DE2, #4A00E0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4 7v10l8 5 8-5V7l-8-5zm0 18l-6-3.75V8.5l6 3.75 6-3.75v7.75L12 20z'/%3E%3C/svg%3E");
}

.icon-royal {
  --icon-color: linear-gradient(45deg, #B79891, #94716B);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
}

/* Hotel Amenities Icons */
.luxury-icon-wifi {
    --icon-path: path('M12,19 C12,19 15.5,15.5 19,19 M8,15 C8,15 16,7 24,15 M4,11 C4,11 16,0 28,11');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-pool {
    --icon-path: path('M5,15 C10,13 15,17 20,15 M5,20 C10,18 15,22 20,20 M12,10 C12,7 15,5 18,7');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-restaurant {
    --icon-path: path('M9,3 L9,20 M13,3 C18,3 18,9 13,9 L13,20 M5,3 L5,8 C5,11 8,11 8,8 L8,3');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-spa {
    --icon-path: path('M12,20 C12,12 18,12 18,4 M6,20 C6,12 12,12 12,4');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-room-service {
    --icon-path: path('M3,15 L21,15 M5,15 L5,10 C5,6 9,3 12,3 C15,3 19,6 19,10 L19,15 M12,18 L12,18');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-fitness {
    --icon-path: path('M4,15 L8,15 L8,9 L4,9 M16,15 L20,15 L20,9 L16,9 M8,12 L16,12');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-parking {
    --icon-path: path('M5,5 L19,5 L19,19 L5,19 Z M10,8 L14,8 C16,8 16,12 14,12 L10,12 L10,16');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-beach {
    --icon-path: path('M4,20 C8,18 16,18 20,20 M12,4 C16,4 18,8 18,12 C14,12 12,8 12,4');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-business {
    --icon-path: path('M8,7 L16,7 L16,19 L8,19 Z M10,4 L14,4 L14,7 L10,7 M8,11 L16,11 M8,15 L16,15');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-family {
    --icon-path: path('M10,4 C12,4 12,7 10,7 C8,7 8,4 10,4 M10,7 L10,13 M8,18 L12,18 M6,13 L14,13');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-security {
    --icon-path: path('M12,3 L4,7 L4,11 C4,15 7,19 12,21 C17,19 20,15 20,11 L20,7 L12,3 Z M12,8 L12,14 M9,11 L15,11');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

.luxury-icon-admin {
    --icon-path: path('M12,4 C14,4 14,7 12,7 C10,7 10,4 12,4 M7,20 L17,20 L17,17 C17,13 7,13 7,17 L7,20 Z');
    stroke: var(--icon-color);
    fill: none;
    stroke-width: 2;
}

/* Interactive Animations */
.luxury-icon-wifi:hover {
    --icon-color: #4CAF50;
}

.luxury-icon-pool:hover {
    --icon-color: #03A9F4;
}

.luxury-icon-restaurant:hover {
    --icon-color: #FF9800;
}

.luxury-icon-spa:hover {
    --icon-color: #9C27B0;
}

.luxury-icon-beach:hover {
    --icon-color: #00BCD4;
}

.luxury-icon-security:hover {
    --icon-color: #F44336;
}

/* Amenity Icons - Extended Set */
.icon-wifi {
    /* واي فاي */
    --icon-path: path('M1,9 C8,-2 16,-2 23,9 M5,13 C10,6 14,6 19,13 M9,17 C12,13 14,13 15,17 M12,21 A1,1 0 0,1 12,23 A1,1 0 0,1 12,21');
}

.icon-parking {
    /* موقف سيارات */
    --icon-path: path('M5,5 H19 V19 H5 V5 M8,8 H12 C14,8 16,10 16,12 C16,14 14,16 12,16 H8 V8 M8,10 V14 H12 C13,14 14,13 14,12 C14,11 13,10 12,10 H8');
}

.icon-pool {
    /* مسبح */
    --icon-path: path('M3,15 C7,15 7,13 11,13 C15,13 15,15 19,15 C21,15 21,14 21,14 V17 C21,17 21,18 19,18 C15,18 15,16 11,16 C7,16 7,18 3,18 C1,18 1,17 1,17 V14 C1,14 1,15 3,15 Z M3,10 C7,10 7,8 11,8 C15,8 15,10 19,10 C21,10 21,9 21,9 V12 C21,12 21,13 19,13 C15,13 15,11 11,11 C7,11 7,13 3,13 C1,13 1,12 1,12 V9 C1,9 1,10 3,10 Z');
}

.icon-restaurant {
    /* مطعم */
    --icon-path: path('M11,9 H13 V15 C13,15.55 13.45,16 14,16 H15 V22 H13 V16 H11 V9 M7,9 C7,9 7,9 7,10 L8.5,16 H6.5 L8,10 V9 H7 M8,9 V10 L9.5,16 H7.5 L9,10 V9 H8 M9,9 V10 L10.5,16 H8.5 L10,10 V9 H9');
}

.icon-gym {
    /* صالة رياضية */
    --icon-path: path('M6.5,6.5 H17.5 V17.5 H6.5 V6.5 M4,15 V9 H6 V15 H4 M18,15 V9 H20 V15 H18 M8,11 H16 V13 H8 V11');
}

.icon-room-service {
    /* خدمة الغرف */
    --icon-path: path('M2,17 H22 M4,17 H20 A1,1 0 0,0 21,16 V12 A1,1 0 0,0 20,11 H4 A1,1 0 0,0 3,12 V16 A1,1 0 0,0 4,17 M12,11 V7 M9,7 H15');
}

.icon-conference {
    /* قاعة مؤتمرات */
    --icon-path: path('M5,5 H19 V19 H5 V5 M8,8 V16 H16 V8 H8 M10,10 H14 M10,12 H14 M10,14 H14');
}

.icon-spa-service {
    /* خدمات السبا */
    --icon-path: path('M12,3 C16,3 20,7 20,12 C20,17 16,21 12,21 C8,21 4,17 4,12 C4,7 8,3 12,3 M12,7 C14,7 16,9 16,12 C16,15 14,17 12,17 C10,17 8,15 8,12 C8,9 10,7 12,7');
}

.icon-laundry {
    /* خدمة غسيل الملابس */
    --icon-path: path('M6,2 H18 A2,2 0 0,1 20,4 V20 A2,2 0 0,1 18,22 H6 A2,2 0 0,1 4,20 V4 A2,2 0 0,1 6,2 M12,4 A1,1 0 0,0 11,5 A1,1 0 0,0 12,6 A1,1 0 0,0 13,5 A1,1 0 0,0 12,4 M7,8 A5,5 0 0,0 12,13 A5,5 0 0,0 17,8');
}

/* Hover States */
.icon-wifi:hover,
.icon-parking:hover,
.icon-pool:hover,
.icon-restaurant:hover,
.icon-gym:hover,
.icon-room-service:hover,
.icon-conference:hover,
.icon-spa-service:hover,
.icon-laundry:hover {
    filter: drop-shadow(var(--hover-shadow));
    transform: scale(1.1);
    color: var(--icon-hover);
}

/* Hotel Amenities */
.icon-wifi {
    mask-image: url('../fonts/wifi.svg');
    -webkit-mask-image: url('../fonts/wifi.svg');
}

.icon-pool {
    mask-image: url('../fonts/pool.svg');
    -webkit-mask-image: url('../fonts/pool.svg');
}

.icon-restaurant {
    mask-image: url('../fonts/restaurant.svg');
    -webkit-mask-image: url('../fonts/restaurant.svg');
}

.icon-fitness {
    mask-image: url('../fonts/fitness.svg');
    -webkit-mask-image: url('../fonts/fitness.svg');
}

.icon-spa {
    mask-image: url('../fonts/spa.svg');
    -webkit-mask-image: url('../fonts/spa.svg');
}

/* Room Features */
.icon-air-conditioning {
    mask-image: url('../fonts/air-conditioning.svg');
    -webkit-mask-image: url('../fonts/air-conditioning.svg');
}

.icon-tv {
    mask-image: url('../fonts/smart-tv.svg');
    -webkit-mask-image: url('../fonts/smart-tv.svg');
}

.icon-minibar {
    mask-image: url('../fonts/minibar.svg');
    -webkit-mask-image: url('../fonts/minibar.svg');
}

/* Views */
.luxury-icon-sea-view {
    mask-image: url('../fonts/sea-view.svg');
    -webkit-mask-image: url('../fonts/sea-view.svg');
}

.luxury-icon-city-view {
    mask-image: url('../fonts/city-view.svg');
    -webkit-mask-image: url('../fonts/city-view.svg');
}

.luxury-icon-mountain-view {
    mask-image: url('../fonts/mountain-view.svg');
    -webkit-mask-image: url('../fonts/mountain-view.svg');
}

.luxury-icon-garden-view {
    mask-image: url('../fonts/garden-view.svg');
    -webkit-mask-image: url('../fonts/garden-view.svg');
}

/* Services */
.icon-room-service {
    mask-image: url('../fonts/room-service.svg');
    -webkit-mask-image: url('../fonts/room-service.svg');
}

.icon-cleaning {
    mask-image: url('../fonts/cleaning.svg');
    -webkit-mask-image: url('../fonts/cleaning.svg');
}

.icon-concierge {
    mask-image: url('../fonts/concierge.svg');
    -webkit-mask-image: url('../fonts/concierge.svg');
}

/* Hotel Features */
.luxury-icon-pool {
    mask-image: url('../fonts/pool.svg');
    -webkit-mask-image: url('../fonts/pool.svg');
}

.luxury-icon-spa {
    mask-image: url('../fonts/spa.svg');
    -webkit-mask-image: url('../fonts/spa.svg');
}

.luxury-icon-fitness {
    mask-image: url('../fonts/fitness.svg');
    -webkit-mask-image: url('../fonts/fitness.svg');
}

.luxury-icon-restaurant {
    mask-image: url('../fonts/restaurant.svg');
    -webkit-mask-image: url('../fonts/restaurant.svg');
}

/* Room Features */
.luxury-icon-air-conditioning {
    mask-image: url('../fonts/air-conditioning.svg');
    -webkit-mask-image: url('../fonts/air-conditioning.svg');
}

.luxury-icon-minibar {
    mask-image: url('../fonts/minibar.svg');
    -webkit-mask-image: url('../fonts/minibar.svg');
}

.luxury-icon-tv {
    mask-image: url('../fonts/smart-tv.svg');
    -webkit-mask-image: url('../fonts/smart-tv.svg');
}

/* Services */
.luxury-icon-room-service {
    mask-image: url('../fonts/room-service.svg');
    -webkit-mask-image: url('../fonts/room-service.svg');
}

.luxury-icon-laundry {
    mask-image: url('../fonts/laundry.svg');
    -webkit-mask-image: url('../fonts/laundry.svg');
}

.luxury-icon-wifi {
    mask-image: url('../fonts/wifi.svg');
    -webkit-mask-image: url('../fonts/wifi.svg');
}

.luxury-icon-parking {
    mask-image: url('../fonts/parking.svg');
    -webkit-mask-image: url('../fonts/parking.svg');
}

.luxury-icon-concierge {
    mask-image: url('../fonts/concierge.svg');
    -webkit-mask-image: url('../fonts/concierge.svg');
}

.luxury-icon-airport-transfer {
    mask-image: url('../fonts/airport-transfer.svg');
    -webkit-mask-image: url('../fonts/airport-transfer.svg');
}

/* Room Types */
.luxury-icon-suite {
    mask-image: url('../fonts/suite.svg');
    -webkit-mask-image: url('../fonts/suite.svg');
}

.luxury-icon-royal-suite {
    mask-image: url('../fonts/royal-suite.svg');
    -webkit-mask-image: url('../fonts/royal-suite.svg');
}

.luxury-icon-double-bed {
    mask-image: url('../fonts/double-bed.svg');
    -webkit-mask-image: url('../fonts/double-bed.svg');
}

.luxury-icon-living-room {
    mask-image: url('../fonts/living-room.svg');
    -webkit-mask-image: url('../fonts/living-room.svg');
}