/* ==========================================================================
   PlacasBR — Componentes Extras
   ========================================================================== */

/* ---- Skeleton Loading ---- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 16px; }

/* ---- Car Loading Animation ---- */
.loading-animation { display: flex; justify-content: center; margin-bottom: 20px; }
.car-loading { position: relative; width: 80px; height: 40px; }
.car-body {
  position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  border-radius: 12px 12px 4px 4px;
  animation: carBounce 0.5s ease infinite alternate;
}
.car-wheel {
  position: absolute; bottom: 0; width: 16px; height: 16px;
  background: var(--bg-primary); border: 3px solid var(--accent);
  border-radius: 50%;
  animation: wheelSpin 0.5s linear infinite;
}
.car-wheel-front { right: 8px; }
.car-wheel-rear  { left: 8px; }
@keyframes carBounce { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes wheelSpin { to { transform: rotate(360deg); } }

/* ---- Plate Formatting ---- */
.plate-input:not(:placeholder-shown) {
  font-size: 1.6rem;
  letter-spacing: 6px;
  font-weight: 800;
  color: var(--text-primary);
}

/* ---- Validation States ---- */
.plate-valid   { color: var(--green); }
.plate-invalid { color: var(--red); }
.plate-neutral { color: var(--text-muted); }

.form-control.input-valid   { border-color: rgba(34,197,94,.5); }
.form-control.input-invalid { border-color: rgba(239,68,68,.5); }

/* ---- Payment ---- */
.checkout-container {
  max-width: 800px; margin: 40px auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px;
}
.plan-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.payment-form  { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.pix-qrcode { text-align: center; padding: 32px; background: #fff; border-radius: var(--radius); display: inline-block; }
.pix-code-display { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; font-size: 0.75rem; font-family: monospace; word-break: break-all; margin-top: 16px; }

/* ---- Notification Dot ---- */
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }

/* ---- Table of Contents (Floating) ---- */
.toc-float {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 100;
}
.toc-item {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: all var(--transition);
}
.toc-item.active { background: var(--accent); transform: scale(1.5); }

/* ---- Progress Bar ---- */
.progress-bar { height: 4px; background: var(--bg-input); border-radius: 100px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); border-radius: 100px; transition: width 0.5s ease; }

/* ---- Info Tooltip ---- */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #1a1a2e; color: #fff; font-size: 0.75rem; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--radius-sm); pointer-events: none;
  opacity: 0; transition: opacity var(--transition);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
[data-tooltip]:hover::after { opacity: 1; }

/* ---- Dark/Light Toggle Animation ---- */
#iconSun  { display: var(--show-sun,  block); }
#iconMoon { display: var(--show-moon, none); }
[data-theme="light"] { --show-sun: none; --show-moon: block; }
[data-theme="light"] #iconSun  { display: none; }
[data-theme="light"] #iconMoon { display: block; }

/* ---- Responsive Table ---- */
@media (max-width: 640px) {
  .admin-table thead { display: none; }
  .admin-table tr { display: block; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
  .admin-table td { display: flex; justify-content: space-between; padding: 8px 12px; border: none; border-bottom: 1px solid rgba(255,255,255,.03); }
  .admin-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: 0.75rem; }
  .checkout-container { grid-template-columns: 1fr; }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-card-hover); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---- Selection ---- */
::selection { background: rgba(124,58,237,.3); color: var(--text-primary); }

/* ---- Focus Ring ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }