/* ───────────────────────────────────────────
   Smart Translator Widget — Frontend Styles
   ─────────────────────────────────────────── */

:root {
  --st-primary:   #F5A623;
  --st-bg:        #ffffff;
  --st-border:    #e5e7eb;
  --st-text:      #111827;
  --st-muted:     #6b7280;
  --st-shadow:    0 4px 24px rgba(0,0,0,0.13);
  --st-radius:    12px;
  --st-z:         99999;
}

/* ── Floating Button ── */
#st-widget {
  position: fixed;
  z-index: var(--st-z);
  font-family: 'Segoe UI', Arial, sans-serif;
}

#st-widget.bottom-right { bottom: 24px; right: 24px; }
#st-widget.bottom-left  { bottom: 24px; left:  24px; }
#st-widget.top-right    { top:    24px; right: 24px; }
#st-widget.top-left     { top:    24px; left:  24px; }

#st-trigger {
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      var(--st-primary);
  color:           #fff;
  border:          none;
  border-radius:   50px;
  padding:         10px 18px 10px 14px;
  cursor:          pointer;
  font-size:       14px;
  font-weight:     600;
  box-shadow:      var(--st-shadow);
  transition:      background 0.2s, transform 0.15s;
  white-space:     nowrap;
}
#st-trigger:hover { background: #1648c0; transform: translateY(-2px); }

#st-trigger .st-globe { font-size: 20px; line-height: 1; }
#st-trigger .st-label { letter-spacing: 0.02em; }
#st-trigger .st-arrow {
  font-size: 10px;
  transition: transform 0.25s;
  margin-left: 2px;
}
#st-widget.open #st-trigger .st-arrow { transform: rotate(180deg); }

/* ── Dropdown Panel ── */
#st-panel {
  position:      absolute;
  background:    var(--st-bg);
  border:        1px solid var(--st-border);
  border-radius: var(--st-radius);
  box-shadow:    var(--st-shadow);
  width:         270px;
  max-height:    400px;
  display:       none;
  flex-direction:column;
  overflow:      hidden;
}

#st-widget.bottom-right #st-panel,
#st-widget.bottom-left  #st-panel { bottom: calc(100% + 10px); }
#st-widget.top-right    #st-panel,
#st-widget.top-left     #st-panel { top:    calc(100% + 10px); }

#st-widget.bottom-right #st-panel,
#st-widget.top-right    #st-panel { right: 0; }
#st-widget.bottom-left  #st-panel,
#st-widget.top-left     #st-panel { left:  0; }

#st-widget.open #st-panel { display: flex; }

/* ── Search box inside panel ── */
#st-search-wrap {
  padding:       10px 12px 8px;
  border-bottom: 1px solid var(--st-border);
  position:      relative;
}
#st-search {
  width:         100%;
  box-sizing:    border-box;
  border:        1px solid var(--st-border);
  border-radius: 6px;
  padding:       6px 10px 6px 30px;
  font-size:     13px;
  outline:       none;
  color:         var(--st-text);
}
#st-search:focus { border-color: var(--st-primary); }
#st-search-icon {
  position:  absolute;
  left:      20px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--st-muted);
  font-size: 13px;
  pointer-events: none;
}

/* ── Language List ── */
#st-lang-list {
  overflow-y: auto;
  flex:       1;
  padding:    6px 0;
  margin:     0;
  list-style: none;
}
#st-lang-list::-webkit-scrollbar       { width: 5px; }
#st-lang-list::-webkit-scrollbar-track { background: transparent; }
#st-lang-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

.st-lang-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     8px 14px;
  cursor:      pointer;
  font-size:   13.5px;
  color:       var(--st-text);
  transition:  background 0.12s;
}
.st-lang-item:hover            { background: #f3f4f6; }
.st-lang-item.active           { background: #eff6ff; color: var(--st-primary); font-weight: 600; }
.st-lang-item .st-flag         { font-size: 20px; width: 26px; text-align: center; }
.st-lang-item .st-lang-name    { flex: 1; }
.st-lang-item.active::after    { content: '✓'; color: var(--st-primary); font-weight: 700; }

/* ── Loading Overlay ── */
#st-loader {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(255,255,255,0.7);
  z-index:         calc(var(--st-z) - 1);
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             12px;
  font-size:       16px;
  font-weight:     600;
  color:           var(--st-primary);
}
#st-loader.visible { display: flex; }

.st-spinner {
  width:  36px;
  height: 36px;
  border: 4px solid #dbeafe;
  border-top-color: var(--st-primary);
  border-radius: 50%;
  animation: st-spin 0.75s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }

#st-progress-wrap {
  width:         220px;
  height:        6px;
  background:    #dbeafe;
  border-radius: 99px;
  overflow:      hidden;
  margin-top:    4px;
}
#st-progress-bar {
  height:     100%;
  width:      0%;
  background: var(--st-primary);
  border-radius: 99px;
  transition: width 0.3s ease;
}

/* ── Reset Button ── */
#st-reset-bar {
  display:         none;
  align-items:     center;
  justify-content: space-between;
  padding:         6px 14px;
  background:      #eff6ff;
  border-top:      1px solid #bfdbfe;
  font-size:       12px;
  color:           var(--st-primary);
}
#st-reset-bar.visible { display: flex; }
#st-reset-btn {
  background:    none;
  border:        1px solid var(--st-primary);
  border-radius: 4px;
  color:         var(--st-primary);
  font-size:     11px;
  padding:       2px 8px;
  cursor:        pointer;
}
#st-reset-btn:hover { background: var(--st-primary); color: #fff; }

/* ══════════════════════════════════════════
   Inline / Shortcode Widget Styles
   ══════════════════════════════════════════ */

.st-inline-wrap {
  position: relative;
  display:  inline-block;
}

/* ── Inline Dropdown Trigger ── */
.st-inline-trigger {
  display:      flex;
  align-items:  center;
  gap:          8px;
/*   background:   var(--st-primary); */
  color:        #fff;
/*   border:       none;
  border-radius:50px; */
  padding:      9px 16px 9px 12px;
  margin: 2px;
  cursor:       pointer;
  font-size:    14px;
  font-weight:  600;
/*   box-shadow:   var(--st-shadow); */
  transition:   background 0.2s, transform 0.15s;
  white-space:  nowrap;
}
.st-inline-trigger:hover { background: #1648c0; transform: translateY(-1px); }
.st-inline-trigger .st-arrow { font-size: 10px; transition: transform 0.25s; }
.st-inline-wrap.open .st-inline-trigger .st-arrow { transform: rotate(180deg); }

/* ── Inline Panel ── */
.st-inline-panel {
  display:       none;
  position:      absolute;
  top:           calc(100% + 8px);
  left:          0;
  background:    var(--st-bg);
  border:        1px solid var(--st-border);
  border-radius: var(--st-radius);
  box-shadow:    var(--st-shadow);
  width:         260px;
  max-height:    360px;
  flex-direction:column;
  overflow:      hidden;
  z-index:       var(--st-z);
}
.st-inline-wrap.open .st-inline-panel { display: flex; }

.st-search-wrap {
  padding:       10px 12px 8px;
  border-bottom: 1px solid var(--st-border);
  position:      relative;
}
.st-search-input {
  width:      100%;
  box-sizing: border-box;
  border:     1px solid var(--st-border);
  border-radius: 6px;
  padding:    6px 10px 6px 28px;
  font-size:  13px;
  outline:    none;
  color:      var(--st-text);
}
.st-search-input:focus { border-color: var(--st-primary); }
.st-search-icon {
  position:   absolute;
  left:       20px;
  top:        50%;
  transform:  translateY(-50%);
  font-size:  12px;
  pointer-events: none;
}
.st-lang-list {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
  margin: 0;
  list-style: none;
}
.st-lang-list::-webkit-scrollbar { width: 5px; }
.st-lang-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

/* ── Button Strip ── */
.st-button-strip {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  align-items:center;
}
.st-lang-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  background:    #f3f4f6;
  border:        1px solid var(--st-border);
  border-radius: 6px;
  padding:       5px 10px;
  cursor:        pointer;
  font-size:     13px;
  color:         var(--st-text);
  transition:    background 0.15s, border-color 0.15s;
  white-space:   nowrap;
}
.st-lang-btn:hover  { background: #e5e7eb; }
.st-lang-btn.active { background: var(--st-primary); color: #fff; border-color: var(--st-primary); }
.st-lang-btn .st-flag   { font-size: 16px; }
.st-lang-btn .st-btn-name { font-size: 12px; }

/* ── Shared Reset Bar for Inline ── */
.st-inline-wrap .st-reset-bar {
  display:         none;
  align-items:     center;
  justify-content: space-between;
  padding:         6px 14px;
  background:      #eff6ff;
  border-top:      1px solid #bfdbfe;
  font-size:       12px;
  color:           var(--st-primary);
}
.st-inline-wrap .st-reset-bar.visible { display: flex; }
.st-inline-wrap .st-reset-btn {
  background:    none;
  border:        1px solid var(--st-primary);
  border-radius: 4px;
  color:         var(--st-primary);
  font-size:     11px;
  padding:       2px 8px;
  cursor:        pointer;
}
.st-inline-wrap .st-reset-btn:hover { background: var(--st-primary); color: #fff; }