/* Feedback Widget Styles (desktop + mobile)
   Adapted for secure client site dark theme
*/

.fb-container { position: fixed; inset: 0; pointer-events: none; z-index: 10000; }

/* Sticky Tab - positioned on side of screen */
.fb-tab { 
  position: fixed; 
  right: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 60px; 
  height: 120px; 
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  gap: 8px; 
  padding: 16px 8px; 
  border-radius: 10px 0 0 10px; 
  background: var(--primary-color); 
  color: #fff; 
  font-weight: 600; 
  cursor: pointer; 
  pointer-events: auto; 
  user-select: none; 
  box-shadow: -6px 0 16px rgba(0,0,0,0.4); 
  transition: transform 0.2s ease, opacity 0.2s ease; 
  touch-action: none; 
  writing-mode: vertical-rl;
  text-orientation: mixed;
  z-index: 9999;
}
.fb-tab i { color: #fff; }
.fb-tab:focus { outline: none; }
.fb-tab:hover { transform: translate(-4px, -50%); }
@media (prefers-reduced-motion: reduce) { .fb-tab { transition: none; } .fb-tab:hover { transform: translateY(-50%); } }

/* Mobile FAB variant */
@media (max-width: 768px) {
  .fb-tab { 
    right: max(16px, env(safe-area-inset-right)); 
    bottom: max(16px, env(safe-area-inset-bottom)); 
    top: auto;
    transform: none;
    width: 56px; 
    height: 56px; 
    border-radius: 28px; 
    justify-content: center; 
    padding: 0;
    writing-mode: initial;
    text-orientation: initial;
    flex-direction: row;
  }
  .fb-tab .fb-label { display: none; }
}

/* Overlay */
.fb-overlay { 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,0.7); 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 200ms ease; 
  pointer-events: none; 
  z-index: 10000; 
  cursor: pointer; 
}
.fb-overlay.active { 
  opacity: 1; 
  visibility: visible; 
  pointer-events: auto; 
}
@media (prefers-reduced-motion: reduce) { .fb-overlay { transition: none; } }

/* Panel - styled like main site modals with light theme */
.fb-panel { 
  position: fixed; 
  right: 0; 
  bottom: 0; 
  top: 0; 
  width: 440px; 
  max-width: 92vw; 
  background: #fff; 
  color: #333; 
  transform: translateX(100%); 
  opacity: 1; 
  box-shadow: -8px 0 24px rgba(0,0,0,0.2); 
  transition: transform 220ms ease; 
  display: flex; 
  flex-direction: column; 
  z-index: 10001; 
  cursor: default; 
  border-radius: 20px 0 0 20px;
  pointer-events: auto;
  border-left: 1px solid #e0e0e0;
}
.fb-panel.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .fb-panel { transition: none; } }
@media (max-width: 768px) { 
  .fb-panel { 
    width: 100vw; 
    max-width: 100vw; 
    border-radius: 12px 12px 0 0; 
    bottom: 0; 
    top: auto; 
    height: 90vh; 
    transform: translateY(100%); 
  }
  .fb-panel.open { transform: translateY(0); }
}

.fb-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 1.5rem; 
  background: linear-gradient(135deg, var(--primary-color), #165761); 
  color: #fff; 
  border-radius: 20px 0 0 0;
}
.fb-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.fb-close { 
  background: none; 
  border: none; 
  color: #fff; 
  font-size: 1.25rem; 
  cursor: pointer; 
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}
.fb-close:hover { opacity: 0.8; }
.fb-body { padding: 2rem; overflow: auto; flex: 1; background: #fff; }
.fb-footer { display: flex; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid #e0e0e0; background: #fff; }

/* Form - matching main site form styling with light theme */
.fb-field { margin-bottom: 1.5rem; }
.fb-field label { 
  display: block; 
  font-weight: 500; 
  color: #333; 
  margin-bottom: 0.5rem; 
  font-size: 1rem; 
}

.fb-nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; }
.fb-nps input { display: none; }
.fb-nps label { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  padding: 8px; 
  cursor: pointer; 
  background: #fff; 
  color: #333;
  transition: border-color 0.3s ease;
}
.fb-nps input:checked + label { 
  background: var(--primary-color); 
  color: #fff; 
  border-color: var(--primary-color); 
}

.fb-help { font-size: 0.85rem; color: #666; margin-top: 0.5rem; }

/* Input styling to match main site light theme */
.fb-input, .fb-select, .fb-textarea { 
  width: 100%; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  padding: 0.75rem; 
  font-size: 1rem; 
  background: #fff; 
  color: #333; 
  transition: border-color 0.3s ease;
}

.fb-input:focus, .fb-select:focus, .fb-textarea:focus { 
  outline: none; 
  border-color: var(--primary-color); 
  box-shadow: 0 0 0 2px rgba(27, 104, 117, 0.2); 
}

.fb-textarea { min-height: 96px; resize: vertical; }

.fb-select { 
  appearance: none; 
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); 
  background-repeat: no-repeat; 
  background-position: right 8px center; 
  background-size: 16px; 
  padding-right: 32px; 
}

.fb-error { color: #ff6b6b; font-size: 0.85rem; margin-top: 4px; }

/* Button styling to match main site dark theme */
.fb-btn { 
  background: var(--primary-color); 
  color: #fff; 
  border: 1px solid var(--primary-color); 
  border-radius: 8px; 
  padding: 0.75rem 1.5rem; 
  cursor: pointer; 
  font-weight: 600; 
  font-size: 1rem;
  transition: all 0.3s ease;
  min-width: 120px;
}
.fb-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.fb-btn.secondary { 
  background: #fff; 
  color: var(--primary-color); 
  border-color: var(--primary-color); 
}
.fb-btn:hover:not([disabled]) { 
  background: #165761; 
  border-color: #165761;
}
.fb-btn.secondary:hover:not([disabled]) { 
  background: #f8f9fa; 
}

.fb-thanks { text-align: center; padding: 2rem; }
.fb-thanks h3 { color: var(--primary-color); margin-bottom: 1rem; font-size: 1.5rem; font-weight: 600; }
.fb-thanks p { color: #666; margin-bottom: 1rem; line-height: 1.6; }

.fb-success-icon, .fb-error-icon { margin-bottom: 1rem; }

.fb-next-steps { 
  background: #f8f9fa; 
  border-radius: 8px; 
  padding: 1.5rem; 
  margin-top: 1.5rem; 
  border-left: 4px solid var(--primary-color);
}

.fb-next-steps p { 
  margin-bottom: 0.5rem; 
  color: #333; 
  font-weight: 500;
}

.fb-next-steps ul { 
  list-style: none; 
  padding: 0; 
}

.fb-next-steps li { 
  padding: 0.25rem 0; 
  color: #666; 
  position: relative; 
  padding-left: 1.5rem;
}

.fb-next-steps li:before { 
  content: "✓"; 
  color: var(--primary-color); 
  font-weight: bold; 
  position: absolute; 
  left: 0; 
}

.fb-fastpath { margin-top: 8px; font-size: 0.95rem; }
.fb-fastpath a { color: var(--primary-color); text-decoration: underline; cursor: pointer; }
.fb-fastpath a:hover { text-decoration: none; }

/* Success state styling */
.fb-success { color: #4caf50; }

/* Loading state */
.fb-loading { opacity: 0.7; pointer-events: none; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .fb-input, .fb-select, .fb-textarea { font-size: 16px; /* Prevent zoom on iOS */ }
  .fb-panel { border-radius: 12px 12px 0 0; }
  .fb-header { border-radius: 12px 12px 0 0; padding: 1rem; }
  .fb-header h2 { font-size: 1.2rem; }
  .fb-body { padding: 1rem; }
  .fb-footer { padding: 1rem; }
  .fb-field { margin-bottom: 1rem; }
}