:root{
  --primary:#4a90d9;
  --secondary:#e74c3c;
  --bg:#f8f9fa; 
  --card:#ffffff;
  --text:#333;
  --border:#dee2e6;
  --accent:#27ae60;
  --header-bg:#4a90d9;
  --header-bg-secondary:#357abd;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  direction:rtl;
}

.container{max-width:1400px;margin:0 auto;padding:20px}

header{
  text-align:center;
  padding:30px 20px;
  background:linear-gradient(135deg,var(--header-bg),var(--header-bg-secondary));
  color:#fff;
  margin-bottom:30px;
}

header h1{font-size:2.6em;margin-bottom:10px;letter-spacing:0.5px}
header p{opacity:0.95;font-size:1.1em}

.stats-bar{
  display:flex;
  justify-content:center;
  gap:40px;
  margin-top:20px;
  flex-wrap:wrap;
}

.stat{text-align:center}
.stat-value{font-size:1.85em;font-weight:800}
.stat-label{font-size:0.95em;opacity:0.9}

.search-section{
  background:var(--card);
  border-radius:12px;
  padding:25px;
  box-shadow:0 2px 15px rgba(0,0,0,0.08);
  margin-bottom:25px;
}

.data-source-selector{
  display:flex;
  gap:15px;
  margin-bottom:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.source-btn{
  padding:12px 24px;
  font-size:16px;
  font-weight:700;
  border:2px solid var(--border);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  transition:all 0.3s;
}

.source-btn:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
}

.source-btn.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.source-btn.active.opinion{
  background:var(--accent);
  border-color:var(--accent);
}

.search-row{
  display:flex;
  gap:8px;
  margin-bottom:15px;
  flex-wrap:wrap;
  align-items:center;
}

.search-input{
  flex:1;
  min-width:500px;
  padding:14px 18px;
  font-size:16px;
  border:2px solid var(--border);
  border-radius:8px;
  direction:rtl;
  transition:border-color 0.3s;
}

.search-input:focus{outline:none;border-color:var(--primary)}

.history-dropdown{
  position:absolute;
  top:100%;
  right:0;
  left:0;
  background:var(--card);
  border:2px solid var(--border);
  border-radius:8px;
  margin-top:5px;
  box-shadow:0 4px 15px rgba(0,0,0,0.15);
  max-height:300px;
  overflow-y:auto;
  z-index:1000;
}

.history-header{
  padding:10px 15px;
  background:var(--bg);
  font-weight:700;
  font-size:12px;
  color:var(--primary);
  border-bottom:1px solid var(--border);
}

.history-item{
  padding:10px 15px;
  cursor:pointer;
  transition:background 0.2s;
  direction:rtl;
}

.history-item:hover{
  background:var(--bg);
}

.btn{
  padding:10px 16px;
  font-size:14px;
  font-weight:700;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.25s;
  white-space:nowrap;
}

.btn-primary{background:var(--primary);color:#fff;padding:10px 16px;font-size:14px;}
.btn-primary:hover{background:#357abd;transform:translateY(-2px)}
.btn-secondary{background:#6c757d;color:#fff;padding:10px 16px;font-size:14px;}

.btn-small{
  padding:6px 10px;
  font-size:0.85em;
  border:1px solid #ddd;
  background:#f8f9fa;
  border-radius:4px;
  cursor:pointer;
  margin-left:8px;
}
.btn-small:hover{background:#e9ecef}

.stats-panel{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  padding:15px;
  background:#f8f9fa;
  border-radius:8px;
  margin-top:15px;
}

.stat-card{
  flex:1;
  min-width:150px;
  background:#fff;
  padding:12px 15px;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  text-align:center;
}

.stat-card .value{font-size:1.25em;font-weight:800;color:var(--primary)}
.stat-card .label{font-size:0.85em;color:#666;margin-top:4px}

.stat-card.trend-up .value{color:#27ae60}
.stat-card.trend-down .value{color:#e74c3c}
.stat-card.trend-stable .value{color:#f39c12}

.woty-results{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:15px;
}

.woty-card{
  background:#fff;
  border-radius:8px;
  padding:15px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.woty-card .rank{
  font-size:1.5em;
  font-weight:900;
  color:var(--primary);
  float:left;
  direction:ltr;
}

.woty-card .word{
  font-size:1.5em;
  font-family:Arial,sans-serif;
  direction:rtl;
  padding-left:45px;
}

.woty-card .meta{font-size:0.9em;color:#666;margin-top:8px}
.woty-card:hover{cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.15)}

.options-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
}

.option-group{display:flex;align-items:center;gap:8px}
.option-group label{font-weight:700;color:#666}

select{
  padding:10px 15px;
  font-size:14px;
  border:2px solid var(--border);
  border-radius:6px;
  background:#fff;
  cursor:pointer;
}

#countryCompareToggle{
  cursor:pointer;
  margin-left:5px;
}

.results-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}
@media(max-width:1000px){.results-grid{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border-radius:12px;
  padding:25px;
  box-shadow:0 2px 15px rgba(0,0,0,0.08);
}

.card-full{grid-column:1 / -1}

.card h3{
  margin-bottom:20px;
  color:var(--primary);
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.chart-container{position:relative;height:350px}

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.data-table th,.data-table td{
  padding:12px 15px;
  text-align:right;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}

.data-table th{
  background:#f8f9fa;
  font-weight:800;
  position:sticky;
  top:0;
  z-index:1;
}

.data-table tr:hover{background:#f8f9fa}
.data-table .arabic{direction:rtl;font-size:16px}

.table-wrapper{max-height:400px;overflow-y:auto}

.frequency-bar{
  display:inline-block;
  height:8px;
  border-radius:4px;
  margin-right:10px;
}

.loading{
  text-align:center;
  padding:50px;
  color:#666;
}

.loading::after{
  content:'';
  display:inline-block;
  width:20px;
  height:20px;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-right:10px;
}

@keyframes spin{to{transform:rotate(360deg)}}

.error{color:var(--secondary);padding:20px;text-align:center}

.tag{
  display:inline-block;
  padding:4px 10px;
  background:#e9ecef;
  border-radius:15px;
  font-size:12px;
  margin:2px;
}

.tag.active{background:var(--primary);color:#fff}

.quick-words{margin-top:15px}
.quick-words span{cursor:pointer;transition:all 0.2s}
.quick-words span:hover{background:var(--primary);color:#fff}

.search-hint{
  font-size:13px;
  color:#666;
  margin-top:10px;
  padding:10px 15px;
  background:#f8f9fa;
  border-radius:6px;
  border-right:3px solid var(--primary);
}

.search-hint code{
  background:#e9ecef;
  padding:2px 6px;
  border-radius:3px;
  font-family:monospace;
  direction:ltr;
  unicode-bidi:plaintext;
}

.compare-colors{display:flex;gap:15px;flex-wrap:wrap;margin-top:10px}
.color-legend{display:flex;align-items:center;gap:6px;font-size:14px}
.color-dot{width:12px;height:12px;border-radius:50%}

.matched-terms{
  margin-top:10px;
  padding:10px;
  background:#e8f4fd;
  border-radius:6px;
  font-size:13px;
}
.matched-terms strong{color:var(--primary)}

footer{
  text-align:center;
  padding:30px 20px;
  color:#666;
  margin-top:40px;
}

.hidden{display:none!important}

#status{
  padding:15px;
  text-align:center;
  border-radius:8px;
  margin-bottom:20px;
  font-weight:700;
}
#status.loading-status{background:#fff3cd;color:#856404}
#status.error-status{background:#f8d7da;color:#721c24}
#status.success-status{background:#d4edda;color:#155724}

.data-source-badge{
  display:inline-block;
  padding:4px 12px;
  background:var(--primary);
  color:#fff;
  border-radius:12px;
  font-size:0.85em;
  margin-right:10px;
}

.data-source-badge.opinion{
  background:var(--accent);
}

/* Geographic Map Styles */
.geo-panel{
  background:var(--card);
  border-radius:12px;
  padding:25px;
  box-shadow:0 2px 15px rgba(0,0,0,0.08);
  margin-bottom:25px;
  position:relative;
}

.geo-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:2px solid var(--border);
}

.geo-header h2{
  font-size:1.5em;
  color:var(--primary);
  margin:0;
}

.geo-close-btn{
  background:transparent;
  border:2px solid var(--border);
  font-size:24px;
  cursor:pointer;
  padding:5px 15px;
  border-radius:6px;
  transition:all 0.3s;
}

.geo-close-btn:hover{
  background:var(--border);
  transform:scale(1.1);
}

.geo-container{
  position:relative;
}

/* Leaflet map container */
#geoMapContainer{
  border:2px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

/* Fix Leaflet popup RTL */
.leaflet-popup-content-wrapper{
  direction:rtl;
  text-align:right;
}

.leaflet-popup-content{
  margin:13px 19px;
  line-height:1.6;
}

.map-legend{
  margin-top:20px;
  padding:15px;
  background:var(--bg);
  border-radius:8px;
}

.legend-title{
  font-weight:700;
  margin-bottom:10px;
  font-size:14px;
}

.legend-gradient{
  display:flex;
  height:20px;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:8px;
}

.legend-gradient span{
  flex:1;
}

.legend-labels{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#666;
}

.country-panel{
  position:absolute;
  top:20px;
  left:20px;
  background:#fff;
  border:2px solid var(--border);
  border-radius:8px;
  padding:20px;
  box-shadow:0 4px 15px rgba(0,0,0,0.15);
  min-width:250px;
  z-index:1000;
}

.country-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

.country-detail-header h3{
  margin:0;
  color:var(--primary);
}

.country-detail-content{
  line-height:1.8;
}

.country-detail-content p{
  margin:8px 0;
}

.country-detail-content button{
  margin-top:15px;
  width:100%;
}

/* Timeline Controls */
.timeline-controls{
  background:var(--bg);
  border-radius:8px;
  padding:20px;
  margin-top:20px;
}

.timeline-btn{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px 20px;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s;
  min-width:120px;
}

.timeline-btn:hover{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.timeline-btn:active{
  transform:scale(0.98);
}

.timeline-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:4px;
  background:linear-gradient(to right, #ddd 0%, var(--primary) 100%);
  outline:none;
  cursor:pointer;
}

.timeline-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--primary);
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:all 0.2s;
}

.timeline-slider::-webkit-slider-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 3px 10px rgba(0,0,0,0.3);
}

.timeline-slider::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--primary);
  cursor:pointer;
  border:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:all 0.2s;
}

.timeline-slider::-moz-range-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 3px 10px rgba(0,0,0,0.3);
}