/* ==========================================================================
   Floating Contact Widget – Frontend Styles
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --fcw-btn-bg:       #023F88;
  --fcw-btn-size:     56px;
  --fcw-icon-size:    40px;
  --fcw-gap:          10px;
  --fcw-radius:       50%;
  --fcw-shadow:       0 4px 16px rgba(0, 0, 0, .22);
  --fcw-menu-bg:      #fff;
  --fcw-menu-hover:   #f4f4f4;
  --fcw-label-color:  #333;
  --fcw-offset-x:     20px;
  --fcw-offset-y:     20px;
  --fcw-z:            9999;
  --fcw-transition:   .25s ease;
}

/* ── Widget Container ─────────────────────────────────────────────────────── */
.fcw-widget {
  position: fixed;
  z-index: var(--fcw-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--fcw-gap);
  /* Position is set per modifier below */
}

.fcw-widget.bottom-right {
  right:  var(--fcw-offset-x);
  bottom: var(--fcw-offset-y);
}

.fcw-widget.bottom-left {
  left:   var(--fcw-offset-x);
  bottom: var(--fcw-offset-y);
  align-items: flex-start;
}

/* ── Backdrop ─────────────────────────────────────────────────────── */
.fcw-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: var(--fcw-transition);
}
.fcw-widget.fcw-open .fcw-backdrop {
    opacity: 1;
}

/* ── Items List ───────────────────────────────────────────────────────────── */
.fcw-items {
    position: absolute;
    right: 0;
    bottom: 65px;
    width: 300px;
  list-style: none;
  margin:  0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fcw-gap);
  background: var(--fcw-menu-bg);
  padding: 10px 0;

  /* Hidden by default; shown when .fcw-open */
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--fcw-transition),
              transform var(--fcw-transition),
              visibility 0s var(--fcw-transition);
  pointer-events: none;
}

.fcw-items::before {
    position: absolute;
    bottom: -7px;
    right: 25px;
    left: auto;
    display: inline-block !important;
    border-right: 8px solid transparent;
    border-top: 8px solid #FFFFFF;
    border-left: 8px solid transparent;
    content: '';
    border-top-color: #ffffff;
}

.bottom-left .fcw-items {
  align-items: flex-start;
}

.fcw-widget.fcw-open .fcw-items {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--fcw-transition),
              transform var(--fcw-transition),
              visibility 0s 0s;
  pointer-events: auto;
  z-index: 99;
}

/* ── Single Item ──────────────────────────────────────────────────────────── */
.fcw-item-link {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         10px;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 20px;
}

.bottom-left .fcw-item-link {
  flex-direction: row;        /* icon left, label right */
}

.bottom-right .fcw-item-link {
  flex-direction: row-reverse; /* label left, icon right */
}

/* Icon circle */
.fcw-item-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:    var(--fcw-icon-size);
  height:   var(--fcw-icon-size);
  border-radius: var(--fcw-radius);
  flex-shrink: 0;
  transition: var(--fcw-transition);
}

.fcw-item-icon svg,
.fcw-item-icon img {
  display: block;
}

.fcw-item-icon img {
  object-fit: cover;
}

.fcw-item-link:hover .fcw-item-icon {
  transform:  scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

/* Label tooltip */
.fcw-item-label {
  background:    var(--fcw-menu-bg);
  color:         var(--fcw-label-color);
  font-size:     14px;
  font-weight:   500;
  white-space:   nowrap;
}

.bottom-left .fcw-item-label {
  transform: translateX(-6px);
}

.fcw-item-link:hover .fcw-item-label,
.fcw-item-link:focus .fcw-item-label {
  opacity: 1;
  transform: translateX(0);
}

/* ── Toggle Button ────────────────────────────────────────────────────────── */
.fcw-toggle {
  width:    var(--fcw-btn-size);
  height:   var(--fcw-btn-size);
  border:   none;
  border-radius: var(--fcw-radius);
  background:  var(--fcw-btn-bg);
  color:       #fff;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  box-shadow:  var(--fcw-shadow);
  transition:  var(--fcw-transition);
  flex-shrink: 0;
  z-index: 98;
}
.fcw-toggle::before, .fcw-toggle::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--fcw-btn-bg);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-animation: fcw-pulse 2s infinite;
    animation: fcw-pulse 2s infinite;
}
.fcw-toggle::before {
    animation-delay: .5s;
}

.fcw-toggle svg {
  width:  24px;
  height: 24px;
  transition: transform .3s ease, opacity .2s;
}

.fcw-toggle:hover {
  transform:  scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes fcw-bounceIn {
  0%   { transform: scale(.3);   opacity: 0; }
  50%  { transform: scale(1.08); opacity: 1; }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

@keyframes fcw-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fcw-slideInUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fcw-pulse {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
        -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

.fcw-anim-bounceIn  .fcw-toggle { animation: fcw-bounceIn  .6s both; }
.fcw-anim-fadeIn    .fcw-toggle { animation: fcw-fadeIn     .5s both; }
.fcw-anim-slideInUp .fcw-toggle { animation: fcw-slideInUp  .5s both; }

/* ── Device Visibility ────────────────────────────────────────────────────── */

/* Widget-level hide (global settings) */
@media (min-width: 1024px) {
  .fcw-hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fcw-hide-tablet  { display: none !important; }
}

@media (max-width: 767px) {
  .fcw-hide-mobile  { display: none !important; }
}

/* Item-level device visibility */
@media (min-width: 1024px) {
  .fcw-item.fcw-only-tablet,
  .fcw-item.fcw-only-mobile  { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fcw-item.fcw-only-desktop,
  .fcw-item.fcw-only-mobile  { display: none !important; }
}

@media (max-width: 767px) {
  .fcw-item.fcw-only-desktop,
  .fcw-item.fcw-only-tablet  { display: none !important; }
}

/* ── Accessibility ────────────────────────────────────────────────────────── */
.fcw-toggle:focus-visible,
.fcw-item-link:focus-visible {
  outline:        3px solid #005fcc;
  outline-offset: 3px;
}