/* ===== DaruPay x Bootstrap Overrides (PRO con Branding Dominante) ===== */

/* 1. Paleta y Variables de Diseño */
:root {
  --dp-green-500: #16D571; /* Verde principal */
  --dp-green-600: #13C067; /* Verde oscuro */
  --dp-transition: 0.25s ease;
  --dp-header-h: 80px; /* altura del header */
  /* Suaviza anclas al tener header fijo */
  scroll-padding-top: var(--dp-header-h);
}

/* 💡 Evita scroll horizontal fantasma en móvil */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Empuja el contenido para que no quede tapado por el header fijo */
body {
  padding-top: var(--dp-header-h);
}

/* 2. Header fijo */
.dp-header {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%;
  z-index: 1050;
  transition: background-color var(--dp-transition), box-shadow var(--dp-transition);
  border-bottom: 2px solid transparent;
  background-clip: padding-box;
  border-image: linear-gradient(90deg, var(--dp-green-600), var(--dp-green-500)) 1;
  /* Evita que algo del header “ensanche” el viewport en móvil */
  overflow-x: clip;
}

/* Evita overflow del nav en todas las vistas */
.dp-header .navbar,
.dp-navbar-blur,
.dp-header .container {
  overflow-x: clip;
}

.dp-header--scrolled {
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
}

.dp-navbar-blur {
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  min-height: var(--dp-header-h);
  display: flex;
  align-items: center;
}

/* 3. Theming */
.dp-header[data-bs-theme="dark"] {
  background: #202A37;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-tertiary-bg: rgba(255, 255, 255, 0.05);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(22, 213, 113)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.dp-header[data-bs-theme="light"] {
  background: #E6E6E6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
  --bs-tertiary-bg: rgba(0, 0, 0, 0.04);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(22, 213, 113)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 4. Navegación principal */
.dp-brand__logo { height: 50px; width: auto; }

.navbar-nav .nav-link {
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  transition: color var(--dp-transition), background-color var(--dp-transition);
  color: var(--dp-green-500) !important;
  background-color: transparent; /* sin fondo inicial */
}

/* Hover: fondo suave */
.navbar-nav .nav-link:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--dp-green-500) !important;
}

/* Activo: igual que hover, fondo suave */
.navbar-nav .nav-link.active {
  font-weight: 700;
  background-color: var(--bs-tertiary-bg);
  color: var(--dp-green-500) !important;
}

/* 5. Botones (por si luego los usas) */
.btn-dp, .btn-dp-ghost {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-y: .6rem;
  --bs-btn-padding-x: 1.2rem;
  transition: all var(--dp-transition);
}

.btn-dp {
  color: #fff;
  background: linear-gradient(180deg, var(--dp-green-500), var(--dp-green-600));
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(22, 213, 113, .25);
}
.btn-dp:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 213, 113, .35);
}

.btn-dp-ghost {
  color: var(--dp-green-500) !important;
  background-color: transparent;
  border: 1px solid var(--bs-border-color-translucent);
}
.btn-dp-ghost:hover {
  color: #fff !important;
  background: linear-gradient(180deg, var(--dp-green-500), var(--dp-green-600));
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 213, 113, .35);
}

/* 6. Botón de Icono (Theme Toggle) */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--dp-green-500);
  border: 1px solid var(--bs-border-color-translucent);
  background-color: var(--bs-tertiary-bg);
  transition: color var(--dp-transition), background-color var(--dp-transition), transform .2s ease, border-color var(--dp-transition);
}
.btn-icon:hover {
  transform: scale(1.1);
  border-color: var(--dp-green-500);
}
.dp-header[data-bs-theme="dark"] .dp-icon-sun,
.dp-header[data-bs-theme="light"] .dp-icon-moon { display: none; }

/* 7. Menú Colapsado (Mobile) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-body-bg);
    /* 🔒 No permitas que el collapse se desborde horizontalmente */
    max-width: 100%;
    overflow-x: hidden;
  }
  .navbar-collapse .nav-link {
    color: var(--dp-green-500) !important;
    background-color: transparent;
  }
  .navbar-collapse .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
  }
  .navbar-collapse .nav-link.active {
    font-weight: 700;
    background-color: var(--bs-tertiary-bg);
  }
}

/* 8. Botones Bootstrap alineados al verde DaruPay */
.btn-success {
  background-color: #16D571 !important;
  border-color: #16D571 !important;
  color: #fff !important;
  font-weight: 600;
  transition: all var(--dp-transition);
}
.btn-success:hover {
  background-color: #13C067 !important;
  border-color: #13C067 !important;
  color: #fff !important;
}

.btn-outline-success {
  border-color: #16D571 !important;
  color: #16D571 !important;
  font-weight: 600;
  transition: all var(--dp-transition);
}
.btn-outline-success:hover {
  background-color: #16D571 !important;
  border-color: #16D571 !important;
  color: #fff !important;
}