/* tools-video-length.css — YouTube Video Length Finder page-specific styles */

/* ── Mode Tabs ── */
.vlf-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.vlf-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: var(--color-white, #fff);
  color: var(--color-gray-600, #64748b);
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.vlf-tab:hover {
  border-color: var(--color-primary, #4F46E5);
  color: var(--color-primary, #4F46E5);
}

.vlf-tab--active {
  background: var(--color-primary, #4F46E5);
  border-color: var(--color-primary, #4F46E5);
  color: var(--color-white, #fff);
}

.vlf-tab--active:hover {
  background: var(--color-primary-dark, #4338CA);
  border-color: var(--color-primary-dark, #4338CA);
  color: var(--color-white, #fff);
}

/* ── Input Row ── */
.vlf-input-row {
  display: flex;
  gap: var(--space-3);
}

.vlf-input-row .form-control {
  flex: 1;
}

.vlf-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 14px);
  line-height: 1.6;
}

.vlf-batch-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
}

.vlf-url-count {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-gray-500, #94a3b8);
}

/* ── Loading ── */
.vlf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) 0;
}

.vlf-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-gray-200, #e2e8f0);
  border-top-color: var(--color-primary, #4F46E5);
  border-radius: 50%;
  animation: vlf-spin 0.8s linear infinite;
}

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

.vlf-loading p {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-gray-500, #94a3b8);
}

/* ── Single Result Card ── */
.vlf-result-card {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6);
  margin-top: var(--space-6);
  background: var(--color-gray-50, #f8fafc);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
}

.vlf-result-thumb {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.vlf-result-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md, 8px);
}

.vlf-duration-badge {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.85);
  color: var(--color-white, #fff);
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  letter-spacing: 0.5px;
  font-family: var(--font-mono, monospace);
}

.vlf-result-info {
  flex: 1;
  min-width: 0;
}

.vlf-result-title {
  font-size: var(--font-size-lg, 18px);
  font-weight: 600;
  color: var(--color-gray-900, #0f172a);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
}

.vlf-result-channel {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-gray-500, #94a3b8);
  margin: 0 0 var(--space-3) 0;
}

.vlf-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.vlf-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm, 14px);
  color: var(--color-gray-500, #94a3b8);
}

.vlf-meta-item i {
  color: var(--color-gray-400, #cbd5e1);
}

.vlf-duration-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
}

.vlf-duration-label {
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--color-gray-500, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vlf-duration-value {
  font-size: var(--font-size-xl, 20px);
  font-weight: 700;
  color: var(--color-primary, #4F46E5);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
}

.vlf-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Batch Summary ── */
.vlf-batch-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-gray-50, #f8fafc);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
}

.vlf-summary-stat {
  text-align: center;
}

.vlf-summary-label {
  display: block;
  font-size: var(--font-size-xs, 12px);
  font-weight: 500;
  color: var(--color-gray-500, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.vlf-summary-value {
  display: block;
  font-size: var(--font-size-2xl, 24px);
  font-weight: 700;
  color: var(--color-gray-900, #0f172a);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
}

.vlf-summary-stat--primary .vlf-summary-value {
  color: var(--color-primary, #4F46E5);
  font-size: var(--font-size-3xl, 30px);
}

/* ── Speed Bar ── */
.vlf-speed-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
}

.vlf-speed-label {
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--color-gray-600, #64748b);
  white-space: nowrap;
}

.vlf-speed-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.vlf-speed {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  background: var(--color-white, #fff);
  color: var(--color-gray-600, #64748b);
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.vlf-speed:hover {
  border-color: var(--color-primary, #4F46E5);
  color: var(--color-primary, #4F46E5);
}

.vlf-speed--active {
  background: var(--color-primary, #4F46E5);
  border-color: var(--color-primary, #4F46E5);
  color: var(--color-white, #fff);
}

.vlf-speed--active:hover {
  background: var(--color-primary-dark, #4338CA);
  border-color: var(--color-primary-dark, #4338CA);
  color: var(--color-white, #fff);
}

/* ── Export Bar ── */
.vlf-export-bar {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── Batch List ── */
.vlf-batch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.vlf-batch-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  transition: all 150ms ease;
}

.vlf-batch-item:hover {
  border-color: var(--color-gray-300, #cbd5e1);
  box-shadow: var(--shadow-sm);
}

.vlf-batch-item--error {
  opacity: 0.6;
}

.vlf-batch-thumb {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}

.vlf-batch-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm, 4px);
}

.vlf-batch-info {
  flex: 1;
  min-width: 0;
}

.vlf-batch-title {
  font-size: var(--font-size-base, 16px);
  font-weight: 600;
  color: var(--color-gray-900, #0f172a);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
}

.vlf-batch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.vlf-batch-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm, 14px);
  color: var(--color-gray-500, #94a3b8);
}

.vlf-batch-meta i {
  color: var(--color-gray-400, #cbd5e1);
  font-size: var(--font-size-xs, 12px);
}

/* ── Mobile Responsive ── */
@media (max-width: 767px) {
  .vlf-input-row {
    flex-direction: column;
  }

  .vlf-input-row .button {
    width: 100%;
  }

  .vlf-result-card {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .vlf-result-thumb {
    width: 100%;
  }

  .vlf-duration-value {
    font-size: var(--font-size-lg, 18px);
  }

  .vlf-result-title {
    font-size: var(--font-size-base, 16px);
  }

  .vlf-batch-summary {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .vlf-summary-stat--primary .vlf-summary-value {
    font-size: var(--font-size-2xl, 24px);
  }

  .vlf-speed-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .vlf-batch-item {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .vlf-batch-thumb {
    width: 100%;
  }

  .vlf-batch-title {
    font-size: var(--font-size-sm, 14px);
  }

  .vlf-result-actions {
    flex-direction: column;
  }

  .vlf-result-actions .button {
    width: 100%;
    text-align: center;
  }

  .vlf-export-bar {
    flex-direction: column;
  }

  .vlf-export-bar .button {
    width: 100%;
    text-align: center;
  }

  .vlf-tabs {
    gap: var(--space-1);
  }

  .vlf-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm, 14px);
    min-height: 44px;
  }

  .vlf-result-actions .button,
  .vlf-export-bar .button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}