/* Cores da Logo MyLove2You */
:root {
  --color-bg-light: #fdf6f5;      /* Fundo rosa bem claro */
  --color-pink: #ffb6c1;          /* Rosa pastel */
  --color-blue: #b2dafa;          /* Azul pastel */
  --color-dark: #484d50;          /* Cinza escuro (contorno) */
  --color-dark-text: #2d3748;     /* Texto escuro */
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-pink);
}

.form-control:focus, .form-check-input:focus {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 0.25rem rgba(255, 182, 193, 0.25);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-light);
  color: var(--color-dark-text);
  margin: 0;
}

/* Botões Primários com gradiente */
.btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-blue) 100%) !important;
  border: 2px solid var(--color-dark) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-pink) 100%) !important;
  border-color: var(--color-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3) !important;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-blue) 100%) !important;
  border-color: var(--color-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 182, 193, 0.5) !important;
}

.btn-outline-primary {
  color: var(--color-pink) !important;
  border: 2px solid var(--color-pink) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-primary:hover {
  background: var(--color-pink) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3) !important;
}

/* Background Primary com cores da logo */
.bg-primary {
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-blue) 100%) !important;
}

/* Garantir que o main tenha altura mínima para evitar footer sobrepor conteúdo */
main {
  flex: 1 0 auto;
  padding-bottom: 40px;
}

/* Botões Variantes - mantendo padrão visual mas com identidade própria */
.btn-success {
  background: linear-gradient(135deg, #a8e6cf 0%, #81c784 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #2e7d32 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(129, 199, 132, 0.4) !important;
}

.btn-info {
  background: linear-gradient(135deg, var(--color-blue) 0%, #90caf9 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #1565c0 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-info:hover {
  background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(144, 202, 249, 0.4) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #ffe4b5 0%, #ffd54f 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #f57c00 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-warning:hover {
  background: linear-gradient(135deg, #ffd54f 0%, #ffb74d 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 213, 79, 0.4) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ffcdd2 0%, #ef5350 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #c62828 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 83, 80, 0.4) !important;
}

/* Alerts com cores do tema */
.alert-info {
  background-color: rgba(178, 218, 250, 0.2) !important;
  border: 1px solid var(--color-blue) !important;
  color: #1565c0 !important;
}

.alert-warning {
  background-color: rgba(255, 228, 181, 0.2) !important;
  border: 1px solid #ffd54f !important;
  color: #f57c00 !important;
}

.alert-success {
  background-color: rgba(168, 230, 207, 0.2) !important;
  border: 1px solid #81c784 !important;
  color: #2e7d32 !important;
}

.alert-danger {
  background-color: rgba(255, 205, 210, 0.2) !important;
  border: 1px solid #ef5350 !important;
  color: #c62828 !important;
}

/* Botões Variantes - mantendo padrão visual mas com identidade própria */
.btn-success {
  background: linear-gradient(135deg, #a8e6cf 0%, #81c784 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #2e7d32 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(129, 199, 132, 0.4) !important;
}

.btn-info {
  background: linear-gradient(135deg, var(--color-blue) 0%, #90caf9 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #1565c0 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-info:hover {
  background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(144, 202, 249, 0.4) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #ffe4b5 0%, #ffd54f 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #f57c00 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-warning:hover {
  background: linear-gradient(135deg, #ffd54f 0%, #ffb74d 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 213, 79, 0.4) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ffcdd2 0%, #ef5350 100%) !important;
  border: 2px solid var(--color-dark) !important;
  color: #c62828 !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 83, 80, 0.4) !important;
}

/* Alerts com cores do tema */
.alert-info {
  background-color: rgba(178, 218, 250, 0.2) !important;
  border: 1px solid var(--color-blue) !important;
  color: #1565c0 !important;
}

.alert-warning {
  background-color: rgba(255, 228, 181, 0.2) !important;
  border: 1px solid #ffd54f !important;
  color: #f57c00 !important;
}

.alert-success {
  background-color: rgba(168, 230, 207, 0.2) !important;
  border: 1px solid #81c784 !important;
  color: #2e7d32 !important;
}

.alert-danger {
  background-color: rgba(255, 205, 210, 0.2) !important;
  border: 1px solid #ef5350 !important;
  color: #c62828 !important;
}
/* Bot�o Criar Presente no Menu */
.btn-criar-presente {
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-blue) 100%) !important;
  color: white !important;
  padding: 8px 20px !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  border: 2px solid var(--color-dark) !important;
}

.btn-criar-presente:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(255, 182, 193, 0.4) !important;
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-pink) 100%) !important;
}