/* ====================================================== */
/* === Floating Contact Pro Widget Stylesheet === */
/* ====================================================== */

/* ----- Nút Bấm Chính (Toggle Button) ----- */
.elementor-widget-floating-contact .floating-toggle-btn {
  position: fixed;
  /* Vị trí bottom/right được đặt bởi biến CSS từ control */
  bottom: var(--fcw-button-bottom, 30px); /* Fallback */
  right: var(--fcw-button-right, 20px); /* Fallback */
  /* Kích thước được đặt bởi control */
  /* width: 60px; height: 60px; */
  /* Màu nền được đặt bởi control (normal/open) */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* box-shadow được đặt bởi control */
}

/* Hiệu ứng Pulse */
.elementor-widget-floating-contact .floating-toggle-btn.pulse::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  left: 0;
  /* Sử dụng biến CSS --pulse-color được set bởi control hoặc JS */
  animation: fcw_pulse 2s infinite;
  z-index: -1; /* Nằm dưới nút */
}

@keyframes fcw_pulse {
  0% { box-shadow: 0 0 0 0 var(--pulse-color, rgba(254, 181, 52, 0.6)); } /* Màu fallback */
  70% { box-shadow: 0 0 0 15px var(--pulse-color, rgba(254, 181, 52, 0)); }
  100% { box-shadow: 0 0 0 0 var(--pulse-color, rgba(254, 181, 52, 0)); }
}

/* Icon bên trong nút bấm */
.elementor-widget-floating-contact .floating-toggle-btn .floating-icon {
  /* Kích thước font/icon được đặt bởi control button_size */
  /* Màu sắc được đặt bởi control (normal/open) */
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, fill 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elementor-widget-floating-contact .floating-toggle-btn .floating-icon svg {
    /* Kích thước được đặt bởi control button_size */
    /* Màu fill được đặt bởi control */
    transition: fill 0.3s ease;
}

/* Trạng thái khi nút mở (class .fcw-open thêm bởi JS) */
.elementor-widget-floating-contact .floating-toggle-btn.fcw-open {
   /* Màu nền được đặt bởi control */
   /* Màu icon đóng được đặt bởi control */
}


/* ----- Container chứa Menu ----- */
.elementor-widget-floating-contact .floating-contact-container {
  position: fixed;
  /* Vị trí bottom/right được đặt bởi control (dựa theo vị trí nút) */
   bottom: calc(var(--fcw-button-bottom, 30px) + 60px + 10px); /* Fallback tính toán */
   right: var(--fcw-button-right, 20px); /* Fallback */
  display: none; /* Mặc định ẩn */
  z-index: 998; /* Thấp hơn nút toggle */
}

.elementor-widget-floating-contact .floating-contact-container.show {
  display: block; /* Hiển thị khi có class 'show' */
}


/* ----- Menu Popup ----- */
.elementor-widget-floating-contact .floating-contact-menu {
  position: relative;
  /* Màu nền được đặt bởi control menu_bg_color */
  /* padding được đặt bởi control menu_padding */
  /* border-radius được đặt bởi control menu_border_radius */
  /* box-shadow được đặt bởi control menu_box_shadow */
  /* gap được đặt bởi control menu_items_gap */
  display: flex;
  flex-direction: column;
  animation: fcw_fadeSlide 0.35s ease; /* Đổi tên animation */
}

@keyframes fcw_fadeSlide {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


/* ----- Item trong Menu ----- */
.elementor-widget-floating-contact .floating-contact-menu .menu-item {
  /* Base styles */
  display: flex;
  align-items: center;
  background: #fff; /* Màu nền mặc định, có thể bị ghi đè bởi biến CSS hover */
  border-radius: 12px; /* Có thể thêm control nếu muốn */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Có thể thêm control nếu muốn */
  text-decoration: none;
  padding: 8px 12px; /* Có thể thêm control nếu muốn */
  transition: background-color 0.3s ease, color 0.3s ease, fill 0.3s ease, transform 0.3s ease;
  min-width: 200px; /* Có thể thêm control nếu muốn */
  /* Sử dụng biến CSS cho màu nền normal (mặc định là #fff ở trên) */
  /* background-color: var(--fcw-item-bg-normal, #fff); */
}

/* Icon Wrapper bên trong item */
.elementor-widget-floating-contact .floating-contact-menu .icon-wrap {
  /* Kích thước được tính toán bởi control item_icon_size */
  /* width: 36px; height: 36px; */
  border-radius: 50%;
  /* Màu nền nên giống màu nền menu */
  background: inherit; /* Thừa hưởng từ .floating-contact-menu */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px; /* Có thể thêm control */
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

/* --- Định dạng màu sắc Normal của Item (Sử dụng Biến CSS) --- */

/* Màu Text Normal (Sử dụng biến, fallback về đen) */
.elementor-widget-floating-contact .floating-contact-menu .menu-item .content-wrap strong,
.elementor-widget-floating-contact .floating-contact-menu .menu-item .content-wrap small {
  color: var(--fcw-item-text-normal, #000000);
  transition: color 0.3s ease; /* Đảm bảo có transition */
}

/* Màu Icon Normal (Sử dụng biến, fallback về màu kế thừa/hiện tại) */
.elementor-widget-floating-contact .floating-contact-menu .menu-item .icon-wrap i {
  /* Kích thước được đặt bởi control item_icon_size */
  color: var(--fcw-item-icon-normal, inherit);
  transition: color 0.3s ease; /* Đảm bảo có transition */
}
.elementor-widget-floating-contact .floating-contact-menu .menu-item .icon-wrap svg {
  /* Kích thước được đặt bởi control item_icon_size */
  fill: var(--fcw-item-icon-normal, currentColor);
  transition: fill 0.3s ease; /* Đảm bảo có transition */
  object-fit: contain;
}

/* --- Định dạng màu sắc Hover của Item (Sử dụng Biến CSS) --- */

/* Nền Hover (Sử dụng biến, fallback về xám nhạt) */
.elementor-widget-floating-contact .floating-contact-menu .menu-item:hover {
  background-color: var(--fcw-item-bg-hover, #f0f0f0);
  transform: scale(1.03); /* Giữ lại hiệu ứng phóng to */
}

/* Màu Text Hover (Sử dụng biến, fallback về đen) */
.elementor-widget-floating-contact .floating-contact-menu .menu-item:hover .content-wrap strong,
.elementor-widget-floating-contact .floating-contact-menu .menu-item:hover .content-wrap small {
  color: var(--fcw-item-text-hover, #000000);
}

/* Màu Icon Hover (Sử dụng biến, fallback về màu kế thừa/hiện tại) */
.elementor-widget-floating-contact .floating-contact-menu .menu-item:hover .icon-wrap i {
  color: var(--fcw-item-icon-hover, inherit);
}
.elementor-widget-floating-contact .floating-contact-menu .menu-item:hover .icon-wrap svg {
  fill: var(--fcw-item-icon-hover, currentColor);
}

/* --- Typography (Được quản lý bởi các control Group_Control_Typography) --- */
.elementor-widget-floating-contact .floating-contact-menu .content-wrap strong {
     /* font-weight: bold; */ /* Được quản lý bởi control */
}
.elementor-widget-floating-contact .floating-contact-menu .content-wrap small {
    /* font-size: nhỏ hơn */ /* Được quản lý bởi control */
}


/* ----- Responsive Styles ----- */
/* Áp dụng dựa trên các prefix_class từ control responsive */

/* Ẩn subtext trên mobile (fcw-hide-subtext-mobile) */
@media (max-width: 767px) { /* Sử dụng breakpoint mặc định của Elementor Mobile */
    .elementor-widget-floating-contact.fcw-hide-subtext-mobile .floating-contact-menu .content-wrap small {
        display: none;
    }
    .elementor-widget-floating-contact.fcw-hide-subtext-mobile .floating-contact-menu .content-wrap {
        /* Có thể điều chỉnh line-height nếu cần khi chỉ có 1 dòng */
        /* line-height: 1.2; */
    }
}
/* Ẩn subtext trên tablet (fcw-hide-subtext-tablet) */
@media (min-width: 768px) and (max-width: 1024px) { /* Tablet */
     .elementor-widget-floating-contact.fcw-hide-subtext-tablet .floating-contact-menu .content-wrap small {
        display: none;
    }
     .elementor-widget-floating-contact.fcw-hide-subtext-tablet .floating-contact-menu .content-wrap {
        /* Điều chỉnh lại nếu cần */
     }
}

/* Chỉ hiển thị icon trên mobile (fcw-icon-only-mobile) */
@media (max-width: 767px) {
    .elementor-widget-floating-contact.fcw-icon-only-mobile .floating-contact-menu .content-wrap {
        display: none;
    }
    .elementor-widget-floating-contact.fcw-icon-only-mobile .floating-contact-menu .menu-item {
        justify-content: center;
        min-width: auto; /* Ghi đè min-width nếu có */
        padding: 10px; /* Có thể làm động */
    }
     .elementor-widget-floating-contact.fcw-icon-only-mobile .floating-contact-menu .icon-wrap {
        margin-right: 0;
    }
}
/* Chỉ hiển thị icon trên tablet (fcw-icon-only-tablet) */
@media (min-width: 768px) and (max-width: 1024px) { /* Tablet */
     .elementor-widget-floating-contact.fcw-icon-only-tablet .floating-contact-menu .content-wrap {
        display: none;
    }
    .elementor-widget-floating-contact.fcw-icon-only-tablet .floating-contact-menu .menu-item {
        justify-content: center;
        min-width: auto;
        padding: 10px;
    }
     .elementor-widget-floating-contact.fcw-icon-only-tablet .floating-contact-menu .icon-wrap {
        margin-right: 0;
    }
}


/* Ngăn chặn việc bôi đen/chọn văn bản trên vùng nội dung của item */
.elementor-widget-floating-contact .floating-contact-menu .menu-item .content-wrap {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard syntax */
}
/* ====================================================== */
/* === Kết thúc Stylesheet === */
/* ====================================================== */