/* @import must precede every other rule in a stylesheet. It used to sit far
   down this file, where the browser discards it and reports an invalid rule
   around that line (the "invalid selector near yolo.css" console warning).
   Kept here so landing/auth pages that do not load the font via <link> still
   get it. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

:root {
  --yolo-yellow: #ffc107;
}

.card-yolo {
  border-left: 6px solid var(--yolo-yellow);
}

.btn.btn-yolo {
  --bs-btn-color: #212529;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;

  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #ffb300;
  --bs-btn-hover-border-color: #ffb300;

  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #ffb300;
  --bs-btn-active-border-color: #ffb300;

  --bs-btn-focus-shadow-rgb: 255, 193, 7;

  font-weight: 600;
}


.btn.btn-yolo:hover,
.btn.btn-yolo:focus,
.btn.btn-yolo:active {
  background-color: #ffb300;
  color: #212529;
}

.btn.btn-yolo:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.35);
}


.timer-box {
  background: #212529;
  color: #ffc107;
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: bold;
  display: inline-block;
}

main {
  padding-bottom: 1rem;
}

footer {
  font-size: 0.85rem;
}

/* Fixed-layout data tables.
   - table-layout belongs on the table, not on the th (on a th it is ignored,
     which is why the columns did not behave as the percentages suggested).
   - Cells wrap instead of being clipped: the old `overflow:hidden` +
     `white-space:nowrap` combination cut off the Users table Actions column
     (the Deactivate button was invisible). `overflow-wrap:anywhere` keeps a
     long email or URL inside its column without breaking the layout. */
.table-fixed {
  table-layout: fixed;
  width: 100%;
}

.table-fixed th {
  white-space: nowrap;
}

.table-fixed td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

mark.hl {
    background-color: #fff3cd; /* amarelo suave */
    padding: 0 1px;
    border-radius: 3px;
}


#imagePreview {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.image-thumb {
  position: relative;
  display: inline-block;
}

.image-thumb img {
  display: block;
}

.image-thumb .remove-image {
  position: absolute;
  top: 10px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #dc3545;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.image-thumb .remove-image:hover {
  background: rgba(255,255,255,0.95);
  color: #dc3545;
}

#submitOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}

.overlay-content {
  position: relative;
  z-index: 10000;
  background: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  animation: fadeIn .25s ease-out;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #eee;
  border-top: 4px solid #facc15;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

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

@keyframes fadeIn {
  from { transform: scale(.95); opacity:0; }
  to { transform: scale(1); opacity:1; }
}

/* ── MODERN LANDING PAGE CUSTOM STYLES ── */

body {
  font-family: 'Outfit', sans-serif;
  background-color: #f8fafc; /* Very light modern gray */
}

/* Gradients and Texts */
.text-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-yolo-subtle {
  background-color: rgba(255, 193, 7, 0.15) !important;
}
.text-yolo {
  color: var(--yolo-yellow) !important;
}

.badge-tech {
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* Glow Blobs */
.hero-section {
  background: #ffffff;
}

.glow-blob {
  position: absolute;
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  z-index: 0;
  animation: floatBackground 15s ease-in-out infinite alternate;
}

.glow-blob-1 { top: -150px; left: -100px; }
.glow-blob-2 { bottom: -100px; right: -150px; background: linear-gradient(135deg, #facc15 0%, #f97316 100%); animation-delay: -5s; }

/* Elements Animations */
.btn-hover-float {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-hover-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(255, 193, 7, 0.4) !important;
}

.floating-hero {
  animation: floatUpDown 6s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}

.feature-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 1) !important;
}

.icon-box i {
  transition: transform 0.3s ease;
}
.feature-card:hover .icon-box i {
  transform: rotate(0deg) scale(1.1) !important;
}

/* Entry Animations */
.slide-fade-up {
  animation: slideFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}
.slide-fade-left {
  animation: slideFadeLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateX(30px);
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }

@keyframes slideFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideFadeLeft {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
@keyframes floatBackground {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 20px) scale(1.05); }
  100% { transform: translate(-20px, 40px) scale(0.95); }
}