/* ChonlateePro Master Stylesheet Bundle */
@import url('./tokens.css');
@import url('./components.css');
@import url('./pages.css');

/* Utility Helpers */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-green { color: var(--app_btn); }
.text-blue { color: var(--app_color); }
.text-gray { color: var(--color_gray64); }

.bg-white { background-color: var(--white); }
.bg-light { background-color: var(--color_gray_f8); }
.bg-blue-light { background-color: var(--color_blue_e9); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.rounded-lg { border-radius: var(--radius-lg); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-hover { box-shadow: var(--shadow-hover); }

/* Floating Chat Widget */
.floating-chat {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
}

.chat-button {
  width: 56px;
  height: 56px;
  background-color: var(--app_color);
  color: var(--white);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(40, 152, 203, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.chat-button:hover {
  transform: scale(1.08);
}

.chat-panel {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 320px;
  background-color: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--color_gray_e6);
  display: none;
}

.chat-panel.is-open {
  display: block;
}

/* Cookie Banner */
.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  max-width: 400px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--color_gray_e6);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 0.85rem;
}