:root {
  --orange: #f97316;
  --orange-dark: #c2410c;
  --orange-light: #fff7ed;
  --orange-border: #fed7aa;
  --ink: #3f2a1d;
  --muted: #7c5a45;
}

[v-cloak] {
  display: none;
}

body {
  background: #fffaf5;
  color: var(--ink);
}

.navbar {
  background: #fff;
  border-bottom: 1px solid var(--orange-border);
  box-shadow: 0 2px 12px rgb(124 69 28 / 6%);
}

.navbar-brand {
  color: var(--orange-dark) !important;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav-link {
  color: var(--muted) !important;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--orange-dark) !important;
}

.dropdown-menu {
  border: 1px solid var(--orange-border);
  border-radius: 0.65rem;
  box-shadow: 0 10px 28px rgb(124 69 28 / 12%);
}

.dropdown-item:active,
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--orange-light);
  color: var(--orange-dark);
}

.btn-outline-primary {
  border-color: var(--orange);
  color: var(--orange-dark);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 0 0.2rem rgb(249 115 22 / 20%);
  color: #fff;
}

.jumbotron.bg-primary {
  background: linear-gradient(125deg, #f97316, #ea580c 58%, #c2410c) !important;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 20%);
  margin-bottom: 2.5rem;
  padding-bottom: 3.5rem;
  padding-top: 3.5rem;
}

.jumbotron h1 {
  font-weight: 700;
  letter-spacing: -0.04em;
}

.jumbotron .lead {
  color: rgb(255 255 255 / 88%);
}

h3 {
  color: var(--orange-dark);
  font-weight: 700;
}

hr {
  border-top-color: var(--orange-border);
}

.card {
  background: #fff;
  border: 1px solid var(--orange-border);
  border-radius: 0.8rem;
  box-shadow: 0 8px 24px rgb(124 69 28 / 7%);
  overflow: hidden;
}

.card.bg-light {
  background: var(--orange-light) !important;
  border-style: dashed;
}

.card-header {
  background: #fffaf5;
  border-bottom: 1px solid var(--orange-border);
  color: var(--orange-dark);
  font-weight: 700;
}

.text-primary {
  color: var(--orange-dark) !important;
  cursor: pointer;
  font-weight: 600;
}

.form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 0.2rem rgb(249 115 22 / 15%);
}

.form-check-input {
  accent-color: var(--orange);
}

.text-secondary {
  color: var(--muted) !important;
}

.footer {
  margin-top: 2rem;
}

.heart {
  border-top: 1px solid var(--orange-border);
  height: 1px;
  margin: 0;
}

@media (max-width: 767.98px) {
  .navbar .btn {
    margin-bottom: 0.5rem;
  }

  .jumbotron.bg-primary {
    margin-bottom: 1.75rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
  }
}