/* Cookie-consent banner styles.
   Extracted from css/landing.css so pages that inline their own CSS (the tool
   pages, compare.html, features.html) can still render the banner. landing.css
   keeps its own copy for the pages that already load it, so this file is only
   linked where landing.css is absent. Keep the two in step if either changes. */


/* ========================================
   COOKIE CONSENT — GRANULAR (Necessary / Analytics / Marketing)
   New extended UI alongside the old simple Accept/Decline. Toggles
   are GDPR + India DPDP compliant — categorical opt-in, not single
   "Accept all". Necessary cookies cannot be disabled.
   ======================================== */
.cookie-consent-categories {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.cookie-consent.expanded .cookie-consent-categories {
  display: flex;
}

.cookie-category {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 8px;
}

.cookie-category-info {
  flex: 1;
  min-width: 0;
}

.cookie-category-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0 0 2px;
}

.cookie-category-desc {
  font-size: 11px;
  line-height: 1.4;
  color: #94a3b8;
  margin: 0;
}

.cookie-category-toggle {
  appearance: none;
  width: 36px;
  height: 20px;
  background: #334155;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
  margin-top: 2px;
}

.cookie-category-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s ease;
}

.cookie-category-toggle:checked {
  background: #3788d8;
}

.cookie-category-toggle:checked::after {
  left: 18px;
}

.cookie-category-toggle:disabled {
  background: #475569;
  cursor: not-allowed;
  opacity: 0.7;
}

.cookie-btn-customize {
  background: transparent;
  color: #3788d8;
  border: 1px solid rgba(55, 136, 216, 0.4);
}

.cookie-btn-customize:hover {
  background: rgba(55, 136, 216, 0.1);
}

/* ========================================
   COOKIE CONSENT BANNER
   ======================================== */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0f172a;
  color: #e2e8f0;
  padding: 14px 24px;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-top: 1px solid rgba(55, 136, 216, 0.15);
}

.cookie-consent.visible {
  transform: translateY(0);
}

.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cookie-consent-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.cookie-consent-title {
  display: none;
}

.cookie-consent-text {
  flex: 1;
  min-width: 0;
}

.cookie-consent-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
}

.cookie-consent-text a {
  color: #3788d8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-text a:hover {
  color: #5aa3e8;
}

.cookie-consent-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}

.cookie-btn-accept {
  background: #3788d8;
  color: white;
}

.cookie-btn-accept:hover {
  background: #2c6cb0;
}

.cookie-btn-decline {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
}

.cookie-btn-decline:hover {
  color: #94a3b8;
  border-color: #475569;
}

@media (max-width: 768px) {
  /* Crisp bubble is ~60px, cookie is above it */
    .cookie-consent {
    bottom: 76px;
  }
}

@media (max-width: 640px) {
  .cookie-consent-content {
    flex-wrap: wrap;
  gap: 12px;
  }
  .cookie-consent-icon {
    display: none;
  }
  .cookie-consent-buttons {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
  text-align: center;
  padding: 12px 16px;
  }
  /* Bottom padding: minimum 24px (visible breathing room on Android +
       DevTools where env() returns 0) PLUS the iOS home-indicator inset
       if present. max() picks the larger of the two so both environments
       get the right amount of space and buttons never clip. */
    .cookie-consent {
    padding: 14px 18px max(24px, env(safe-area-inset-bottom));
  }
  /* When the cookie banner is showing, push Crisp's chat bubble above it
       so it doesn't overlap "Accept All". `:has()` keeps this purely
       declarative — no JS coordination needed. Cookie banner is ~145-180px
       tall on mobile (text + 2-button row + padding + safe-area). */
    body:has(.cookie-consent.visible) .crisp-client,
    body:has(.cookie-consent.visible) #crisp-chatbox {
    bottom: 170px !important;
  }
  .cookie-consent {
    bottom: 70px; /* Above Crisp chat bubble */
  }
}

@media (max-width: 480px) {
  .cookie-consent {
    padding: 12px 16px;
  }
  .cookie-consent-text p {
    font-size: 13px;
  }
  .cookie-btn {
    padding: 12px 16px;
  font-size: 13px;
  width: 100%;
  text-align: center;
  }
}