/*
 * Styles for Contact Buttons Lite
 *
 * The buttons share a clean, modern aesthetic with subtle shadows and smooth
 * transitions.  Colours are driven by CSS variables defined inline in PHP.
 */

.cbl-wrap {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none; /* container itself shouldn't capture pointer events */
}

.cbl-wrap .cbl-btn {
  pointer-events: auto; /* buttons can be clicked */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

/* Image icons inside buttons */
.cbl-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* Letter fallback for icons (e.g. WhatsApp) */
.cbl-letters {
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}

.cbl-wrap .cbl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* Main (collapsed) button styles */
.cbl-wrap .cbl-btn--main {
  background-color: var(--cbl-collapsed-color, #2563eb);
  color: var(--cbl-collapsed-icon, #ffffff);
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

/* Specific colours for contact buttons */
.cbl-wrap .cbl-btn--messenger {
  background-color: var(--cbl-messenger-color, #2563eb);
}
.cbl-wrap .cbl-btn--zalo {
  background-color: var(--cbl-zalo-color, #0ea5e9);
}
.cbl-wrap .cbl-btn--phone {
  background-color: var(--cbl-phone-color, #10b981);
}
.cbl-wrap .cbl-btn--whatsapp {
  background-color: var(--cbl-whatsapp-color, #25d366);
}

/* Icons inherit currentColor and size */
.cbl-wrap .cbl-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Collapsed layout – list hidden until toggled */
.cbl-collapsed .cbl-list {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.cbl-collapsed.cbl-open .cbl-list {
  display: flex;
}

/* Separate layout – always show list */
.cbl-separate .cbl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Bar layout – bottom bar across the screen */
.cbl-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 6px 0;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}
.cbl-bar .cbl-list {
  flex: 1;
  display: flex;
  justify-content: space-around;
  gap: 0;
}
.cbl-bar .cbl-btn {
  flex: 1;
  border-radius: 8px;
  margin: 0 2px;
  width: auto;
  height: 48px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cbl-bar .cbl-btn:hover {
  transform: translateY(-1px);
}

/* Position helpers */
.cbl-bottom-right {
  right: 16px;
  bottom: 16px;
}
.cbl-bottom-left {
  left: 16px;
  bottom: 16px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .cbl-wrap.cbl-collapsed,
  .cbl-wrap.cbl-separate {
    gap: 8px;
  }
  .cbl-wrap.cbl-collapsed .cbl-btn--main,
  .cbl-wrap.cbl-separate .cbl-btn,
  .cbl-wrap.cbl-collapsed .cbl-btn {
    width: 48px;
    height: 48px;
  }
  .cbl-wrap.cbl-collapsed .cbl-icon,
  .cbl-wrap.cbl-separate .cbl-icon {
    width: 20px;
    height: 20px;
  }
  .cbl-bar .cbl-btn {
    height: 52px;
  }
}