/* =====================================================================
   style.css — Giao diện & Hiệu ứng TraTuiLoc (Dark / Light Mode)
   ===================================================================== */

/* ─── Smooth theme transitions ──────────────────────── */
body, header, input, section, details, footer {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ─── Gradient button ───────────────────────────────── */
.btn-gradient {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  box-shadow: 0 4px 24px rgba(139, 92, 246, 0.35);
  transition: all 0.2s ease;
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
  box-shadow: 0 6px 28px rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

/* ─── Loading spinner ───────────────────────────────── */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── FAQ details smooth open ───────────────────────── */
details summary::-webkit-details-marker {
  display: none;
}

/* ─── Line clamp ────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Smooth fade-in for result ─────────────────────── */
#resultSection {
  animation: fadeSlideUp 0.4s ease;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Input Error Shake Animation ───────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.input-error {
  animation: shake 0.4s ease;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* =====================================================================
   LIGHT MODE OVERRIDES (Kích hoạt khi <html class="light">)
   ===================================================================== */
html.light body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

html.light header {
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
}

html.light .bg-gray-950 {
  background-color: #F8FAFC !important;
}

html.light .bg-white\/5 {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

html.light .bg-white\/10 {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

html.light .border-white\/10 {
  border-color: #E2E8F0 !important;
}

html.light #urlInput {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html.light #urlInput::placeholder {
  color: #94A3B8 !important;
}

html.light .text-white {
  color: #0F172A !important;
}

html.light .text-gray-400 {
  color: #64748B !important;
}

html.light .text-gray-500 {
  color: #64748B !important;
}

html.light .text-gray-600 {
  color: #94A3B8 !important;
}

/* Nút gradient chữ luôn màu trắng */
html.light .btn-gradient,
html.light .btn-gradient * {
  color: #FFFFFF !important;
}

/* Nút MP3 ở chế độ sáng */
html.light #btnMP3 {
  color: #BE185D !important;
  background-color: #FDF2F8 !important;
  border-color: #FBCFE8 !important;
}
html.light #btnMP3:hover {
  background-color: #FCE7F3 !important;
}

/* Thẻ FAQ ở chế độ sáng */
html.light details {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* Hiệu ứng hào quang nền ở chế độ sáng */
html.light .glow-bg {
  opacity: 0.15 !important;
}

/* Nút chuyển đổi Theme */
#themeToggle {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
#themeToggle:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
html.light #themeToggle {
  border-color: #CBD5E1;
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
html.light #themeToggle:hover {
  background: #F1F5F9;
}

/* ─── Ad Box & Language Switcher ────────────────────── */
.ad-box {
  transition: all 0.2s ease;
}
html.light .ad-box {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
html.light .ad-label {
  color: #94A3B8 !important;
}
html.light #langToggle {
  border-color: #CBD5E1;
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
html.light #langToggle:hover {
  background: #F1F5F9;
}

/* ─── Language Dropdown Menu ────────────────────────── */
#langMenu {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
#langMenu::-webkit-scrollbar {
  width: 6px;
}
#langMenu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
html.light #langMenu {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.lang-item {
  transition: all 0.15s ease;
}
.lang-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
html.light .lang-item {
  color: #334155 !important;
}
html.light .lang-item:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}
.lang-item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(236, 72, 153, 0.25) 100%);
  color: #C084FC !important;
  font-weight: 600;
}
html.light .lang-item.active {
  background: #EDE9FE !important;
  color: #7C3AED !important;
}

/* ─── Skyscraper Side Ads Light Mode ────────────────── */
html.light #ad-left,
html.light #ad-right {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ─── Modal Animation & Light Mode ──────────────────── */
@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-container {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
html.light #downloadModal .modal-container {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
html.light #downloadModal #modalTitle {
  color: #0F172A !important;
}
html.light #downloadModal #modalSubtitle {
  color: #64748B !important;
}
html.light #downloadModal #modalCloseBtn {
  color: #94A3B8 !important;
}
html.light #downloadModal #modalCloseBtn:hover {
  color: #0F172A !important;
}