/* wiper.css */

/* Variabile de culoare */
:root {  /* root permite definirea unor valori reutilizabile in intregul document, light/dark mode */
  --w-bg: #ffffff;  /* background color */
  --w-text: #333333;
  --w-btn-bg: #f5f5f5;
  --w-btn-hover: #e0e0e0;
  --w-border: #cccccc; 
  --w-shadow: rgba(0, 0, 0, 0.15);
}
  
body.dark-mode {
  --w-bg: #2b2b2b;
  --w-text: #f0f0f0;
  --w-btn-bg: #3a3a3a;
  --w-btn-hover: #4a4a4a;
  --w-border: #555555;
  --w-shadow: rgba(0, 0, 0, 0.7);
}
  
#wiperPanelMini {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  width: 200px;

  /* use variables */
  background: var(--w-bg);
  color: var(--w-text);
  border: 1px solid var(--w-border);
  box-shadow: 0 4px 12px var(--w-shadow);

  border-radius: 12px;
  padding: 20px;
  z-index: 100;
  transition: 
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
}

  #wiperPanelMini.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  
#wiperPanelMini h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--w-text);
}
  
  #wiperPanelMini .wiper-buttons {
    display: flex;
    gap: 6px;
  }
  
 #wiperPanelMini .wiper-buttons button {
  flex: 1;
  height: 36px;
  border: 1px solid var(--w-border);
  border-radius: 6px;
  background: var(--w-btn-bg);
  color: var(--w-text);
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}
  
  #wiperPanelMini .wiper-buttons button:hover {
    background: var(--w-btn-hover);
  }
  
  #wiperPanelMini .wiper-buttons button.active {
    background: #007aff;
    color: #fff;
    border-color: #0051a8;
  }