/* Klaro Modal - Complete Override for Ultrathink Site */

/* Cookie modal wrapper - MUST be positioned to be visible */
.klaro .cookie-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  pointer-events: none !important; /* Allow clicks through except on modal itself */
  display: block !important;
}

/* Hide the backdrop overlay (or make it subtle) */
.klaro .cm-bg {
  display: none !important;
}

/* Main Modal Container - Bottom Left, Narrow and Tall */
.klaro .cookie-modal .cm-modal,
.klaro .cm.cm-klaro .cm-modal {
  position: fixed !important;
  bottom: 2rem !important;
  left: 2rem !important;
  top: auto !important;
  right: auto !important;

  /* Ultrathink brand colors */
  background: #0B090A !important; /* void-black */
  border: 1px solid rgba(255, 183, 3, 0.3) !important; /* neural-gold with opacity */

  /* Narrow and tall sizing */
  width: 380px !important;
  max-width: calc(100vw - 4rem) !important;
  max-height: 60vh !important;

  /* Square corners as requested */
  border-radius: 0 !important;

  /* Shadow and visibility */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
  z-index: 10000 !important;

  /* CRITICAL: Ensure modal is visible */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important; /* Modal itself should capture clicks */

  /* Proper padding for the entire box */
  padding: 2rem !important;
}

/* Close button (X) in top right - Now works with mustConsent: false */
.klaro .hide,
.klaro button.hide {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;

  /* Reset hide class */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Styling */
  background: transparent !important;
  border: none !important;
  color: rgba(245, 245, 245, 0.6) !important;
  cursor: pointer !important;

  /* Make it visible */
  z-index: 1001 !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* Transition */
  transition: color 0.2s !important;
}

.klaro .hide:hover,
.klaro button.hide:hover {
  color: #FFB703 !important;
}

/* Style the SVG inside */
.klaro .hide svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

/* Header/Title - Smaller font */
.klaro .cm-header h1,
.klaro .cm-header h2,
.klaro h1,
.klaro h2 {
  color: #FFB703 !important; /* neural-gold */
  font-family: '0xProto', monospace !important;
  font-size: 1.125rem !important; /* text-lg */
  font-weight: normal !important;
  line-height: 1.4 !important;
  margin: 0 0 1rem 0 !important;
  padding-right: 2rem !important; /* Space for close button */
}

/* Body text - Smaller font */
.klaro .cm-body,
.klaro .cm-body p {
  color: #F5F5F5 !important; /* axon-white */
  font-family: 'IBM Plex Serif', serif !important;
  font-size: 0.875rem !important; /* text-sm */
  line-height: 1.5 !important;
  margin: 0 0 1.5rem 0 !important;
}

.klaro .cm-body p:last-child {
  margin-bottom: 1.5rem !important;
}

/* Button container - LEFT ALIGNED with proper spacing */
.klaro .cm-footer-buttons {
  display: flex !important;
  justify-content: flex-start !important; /* Left align */
  align-items: center !important;
  gap: 1rem !important; /* Space between buttons */
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix button order using flexbox - Accept All first (left), Decline second (right) */
.klaro .cm-btn-decline,
.klaro .cm-btn-danger,
.klaro .cn-decline {
  order: 3 !important; /* Decline button on right */
}

.klaro .cm-btn-accept-all {
  order: 1 !important; /* Accept All button on left */
}

/* Hide the regular accept button if accept all is shown */
.klaro .cm-btn-accept:not(.cm-btn-accept-all) {
  order: 2 !important;
}

/* Base button styles - Match Hero component */
.klaro .cm-btn,
.klaro button.cm-btn {
  /* Layout - NOT full width */
  flex: none !important;
  width: auto !important;
  padding: 0.625rem 1.25rem !important; /* Slightly smaller padding */

  /* Typography */
  font-family: '0xProto', monospace !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: normal !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* CRITICAL: Remove uppercase */
  text-transform: none !important;
  letter-spacing: normal !important;

  /* Shape - Match homepage rounded-xl */
  border-radius: 0.75rem !important; /* rounded-xl */
  border: none !important;

  /* Interaction */
  cursor: pointer !important;
  transition: all 0.2s !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* Accept All button - Primary gold style */
.klaro .cm-btn-success,
.klaro button.cm-btn-success,
.klaro .cm-btn-accept-all,
.klaro .cm-btn-accept {
  background: #FFB703 !important; /* neural-gold */
  color: #0B090A !important; /* void-black */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
}

.klaro .cm-btn-success:hover,
.klaro button.cm-btn-success:hover,
.klaro .cm-btn-accept-all:hover,
.klaro .cm-btn-accept:hover {
  background: #FFA500 !important; /* Slightly darker gold */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Decline All button - Blue outline style - FIXED */
.klaro .cm-btn-danger,
.klaro button.cm-btn-danger,
.klaro .cm-btn-decline,
.klaro .cn-decline,
.klaro button.cn-decline {
  background: transparent !important;
  color: #F5F5F5 !important; /* white text */
  border: 1px solid #3B82F6 !important; /* blue-500 outline */
  box-shadow: none !important;
}

.klaro .cm-btn-danger:hover,
.klaro button.cm-btn-danger:hover,
.klaro .cm-btn-decline:hover,
.klaro .cn-decline:hover,
.klaro button.cn-decline:hover {
  background: rgba(59, 130, 246, 0.1) !important; /* Subtle blue bg on hover */
  border-color: #60A5FA !important; /* blue-400 on hover */
  color: #FFFFFF !important;
}

/* Privacy Policy link section */
.klaro .cm-pp,
.klaro .cm-footer-pp {
  text-align: center !important;
  margin: 1.5rem 0 0 0 !important;
  padding: 1.5rem 0 0 0 !important;
  border-top: 1px solid rgba(245, 245, 245, 0.1) !important;
}

/* Privacy Policy link */
.klaro .cm-pp a,
.klaro .cm-footer-pp a,
.klaro a[href*="privacy"] {
  color: #FFB703 !important; /* neural-gold */
  font-family: 'IBM Plex Serif', serif !important;
  font-size: 0.75rem !important; /* text-xs */
  text-decoration: underline !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
}

.klaro .cm-pp a:hover,
.klaro .cm-footer-pp a:hover,
.klaro a[href*="privacy"]:hover {
  opacity: 0.8 !important;
}

/* Hide all unnecessary elements INCLUDING the duplicate "Accept selected" button */
.klaro .cm-services,
.klaro .cm-purposes,
.klaro .cm-service,
.klaro .cm-purpose,
.klaro .cm-switch,
.klaro input[type="checkbox"],
.klaro .cm-toggle,
.klaro .cm-toggle-all,
.klaro .cm-learn-more,
.klaro .cm-powered-by,
.klaro .cm-btn-save,
.klaro .cm-btn-manage,
.klaro .cm-btn-info.cm-btn-accept:not(.cm-btn-accept-all) {  /* Hide "Accept selected" button */
  display: none !important;
}

/* Ensure button text is never uppercase - more aggressive */
.klaro button,
.klaro button *,
.klaro .cm-btn,
.klaro .cm-btn *,
.klaro .cm-btn span,
.klaro button span {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
}

/* Override any inline styles */
.klaro .cm-btn[style*="text-transform"] {
  text-transform: none !important;
}

/* Custom close button for mustConsent:true mode */
.klaro .custom-close {
  position: absolute !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;

  /* Styling - NO BORDER, just the X */
  background: transparent !important;
  border: none !important;
  color: rgba(245, 245, 245, 0.6) !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;

  /* Center the X */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Ensure visibility */
  z-index: 1001 !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* Transition */
  transition: color 0.2s !important;
}

.klaro .custom-close:hover {
  color: #FFB703 !important; /* neural-gold on hover */
  background: transparent !important;
}

/* Privacy Policy link - same size as surrounding text */
.klaro .cm-modal p a,
.klaro .cm-header p a {
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .klaro .cookie-modal .cm-modal,
  .klaro .cm.cm-klaro .cm-modal {
    width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    bottom: 1rem !important;
    max-height: 50vh !important;
    padding: 1.5rem !important;
  }
}