/* Dictionary styles that match the site theme */

:root {
  --primary-green: rgb(3, 58, 14);
  --secondary-green: rgb(45, 87, 44);
  --soft-green: rgb(242, 246, 242);
  --accent-sage: #7C9473;
  --text-dark: #333333;
  --text-light: #ECF0F1;
  --section-bg: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --border-color: #e0e0e0;
}

/* Ensure navbar and footer always have the site's green background */
.navbar, #footer {
  background-color: var(--primary-green) !important;
}

/* Dictionary page container */
.dictionary-page {
  background-color: var(--primary-green);
  min-height: calc(100vh - 330px); /* Adjust based on navbar and footer height */
}

.dictionary-header {
  padding: 2rem 0;
  text-align: center;
}

.dictionary-header h1 {
  color: white;
  font-size: 2.5rem;
  margin: 0;
}

.dictionary-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* Two Column Layout for Desktop */
.dictionary-layout {
  display: flex;
  flex-direction: row; /* Form on left, results on right */
  gap: 20px;
  margin-bottom: 20px;
}

.form-section {
  flex: 1;
}

.result-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card styling to match site design */
.dictionary-card {
  background-color: var(--secondary-green);
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 8px 20px var(--shadow-color);
  min-height: 400px;
  color: white;
  position: relative;
}

.dark-mode-container {
  text-align: right;
  margin-bottom: 15px;
}

.dark-mode-toggle {
  background-color: white;
  color: var(--primary-green);
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.dark-mode-toggle:hover {
  background-color: var(--soft-green);
}

.dictionary-icon {
  text-align: center;
  margin-bottom: 1rem;
}

.dictionary-icon i {
  font-size: 2.5rem;
  color: white;
}

.card-title {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.form-group {
  margin-bottom: 1.2rem;
}

/* Side by side form elements */
.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 0.8rem;
}

.source-language-group, 
.target-language-group {
  flex: 1;
  margin-bottom: 0;
}

.language-options {
  margin-bottom: 1.2rem;
  transition: all 0.3s ease;
}

.bidirectional-note {
  font-size: 0.85rem;
  color: #e0e0e0;
  text-align: center;
  font-style: italic;
  padding: 5px 0;
}

.bidirectional-note i {
  color: white;
  margin-right: 4px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: white;
  font-size: 0.95rem;
}

.language-selector {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid white;
  border-radius: 4px;
  font-size: 0.95rem;
  background-color: white;
  color: var(--text-dark);
  appearance: none;
  -webkit-appearance: none;
  -moz-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='%23033a0e' 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 0.8rem center;
  background-size: 1em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.language-selector:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.level-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.8rem;
}

.level-btn {
  flex: 1;
  min-width: 40px;
  padding: 8px;
  border: 1px solid white;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  transition: all 0.2s ease;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.level-btn:hover {
  background-color: var(--soft-green);
}

.level-btn.active {
  background-color: var(--primary-green);
  color: white;
  border-color: white;
  box-shadow: 0 0 0 2px white;
}

/* Input with inline button */
.input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

input[type="text"] {
  width: 100%;
  padding: 10px 15px;
  padding-right: 50px;
  border: 1px solid white;
  border-radius: 4px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background-color: white;
  color: var(--text-dark);
}

input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.search-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background-color: var(--primary-green);
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  background-color: #264e27;
}

/* Results styling */
.result-placeholder {
  text-align: center;
  color: white;
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.result-arrow-desktop, .result-arrow-mobile {
  font-size: 2rem;
  color: white;
  margin-bottom: 1rem;
}

.result-arrow-mobile {
  display: none;
}

.result-content {
  width: 100%;
  display: none;
}

#searched-word {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  text-align: center;
}

#translation {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 6px;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-align: left;
  color: var(--text-dark);
  white-space: pre-line; /* Preserve line breaks */
  overflow-y: auto;
  max-height: 300px;
  border-left: 4px solid white;
}

.result-details {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  font-size: 0.9rem;
}

.detail-separator {
  margin: 0 6px;
}

.loading {
  text-align: center;
  display: none;
  margin: 20px 0;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8px 15px;
  border-radius: 50px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}

.error-message {
  background-color: rgba(255, 255, 255, 0.9);
  color: #d32f2f;
  padding: 12px;
  border-radius: 4px;
  margin: 20px 0;
  display: none;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-left: 4px solid #d32f2f;
}

/* Light Mode Styles */
body.light-mode .dictionary-page {
  background-color: var(--soft-green);
}

body.light-mode .dictionary-header h1 {
  color: var(--primary-green);
}

body.light-mode .dictionary-card {
  background-color: white;
  color: var(--text-dark);
  border: 1px solid var(--border-color);
}

body.light-mode .dictionary-icon i,
body.light-mode .card-title {
  color: var(--primary-green);
}

body.light-mode label {
  color: var(--text-dark);
}

body.light-mode .bidirectional-note {
  color: #666;
}

body.light-mode .bidirectional-note i {
  color: var(--accent-sage);
}

body.light-mode .level-btn {
  border-color: var(--border-color);
}

body.light-mode .level-btn.active {
  border-color: var(--primary-green);
  box-shadow: none;
}

body.light-mode input[type="text"],
body.light-mode .language-selector {
  border-color: var(--border-color);
}

body.light-mode .result-placeholder {
  color: #888;
}

body.light-mode .result-arrow-desktop,
body.light-mode .result-arrow-mobile {
  color: #aaa;
}

body.light-mode #searched-word {
  color: var(--primary-green);
}

body.light-mode #translation {
  background-color: var(--soft-green);
  border-left-color: var(--accent-sage);
}

body.light-mode .result-details {
  color: #666;
}

body.light-mode .dark-mode-toggle {
  background-color: var(--primary-green);
  color: white;
}

body.light-mode .dark-mode-toggle:hover {
  background-color: var(--secondary-green);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .dictionary-layout {
    flex-direction: column; /* Form on top, results below on mobile */
  }
  
  .dictionary-card {
    min-height: auto;
    margin-bottom: 20px;
  }
  
  .result-arrow-desktop {
    display: none;
  }
  
  .result-arrow-mobile {
    display: block;
  }
  
  .form-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .source-language-group, 
  .target-language-group {
    width: 100%;
  }
  
  .bidirectional-note {
    padding: 8px 0;
  }
}

/* Override to ensure navbar and footer always stay green */
.navbar, #footer {
  background-color: var(--primary-green) !important;
}

body.light-mode .navbar, 
body.light-mode #footer {
  background-color: var(--primary-green) !important;
}