/* =========================================================
   Buttons CSS
   ASP.NET Core Razor Pages frontend starter

   Purpose:
   - Provide reusable button styles for public websites and admin panels.
   - Use with DesignSystem/design-tokens.css.
   - Adapt colors, radius and sizes to the current brand.
========================================================= */

/* =========================================================
   1. Base Button
========================================================= */

.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-height: 44px;
  padding: 0.875rem 1.25rem;

  border: 1px solid transparent;
  border-radius: var(--radius-full, 999px);

  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  user-select: none;

  /* box-shadow is intentionally not transitioned (repaint per frame). */
  transition:
    transform var(--transition-base, 220ms ease),
    background-color var(--transition-base, 220ms ease),
    border-color var(--transition-base, 220ms ease),
    color var(--transition-base, 220ms ease);
}

.btn-custom:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-custom:active {
  transform: translateY(0);
}

.btn-custom:focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--color-primary, #1f3a5f) 35%, transparent);
  outline-offset: 3px;
}

.btn-custom[disabled],
.btn-custom.disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* =========================================================
   2. Primary Button
========================================================= */

.btn-primary-custom {
  color: var(--color-text-light, #ffffff);
  background: var(--color-primary, #1f3a5f);
  border-color: var(--color-primary, #1f3a5f);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(16, 24, 40, 0.08));
}

.btn-primary-custom:hover {
  color: var(--color-text-light, #ffffff);
  background: var(--color-primary-dark, #142740);
  border-color: var(--color-primary-dark, #142740);
  box-shadow: var(--shadow-md, 0 12px 28px rgba(16, 24, 40, 0.1));
}

/* =========================================================
   3. Secondary Button
========================================================= */

.btn-secondary-custom {
  color: var(--color-primary, #1f3a5f);
  background: var(--color-primary-light, #e8eef6);
  border-color: color-mix(
    in srgb,
    var(--color-primary, #1f3a5f) 14%,
    transparent
  );
}

.btn-secondary-custom:hover {
  color: var(--color-primary-dark, #142740);
  background: color-mix(
    in srgb,
    var(--color-primary-light, #e8eef6) 80%,
    #ffffff
  );
  border-color: color-mix(
    in srgb,
    var(--color-primary, #1f3a5f) 24%,
    transparent
  );
}

/* =========================================================
   4. Outline Button
========================================================= */

.btn-outline-custom {
  color: var(--color-primary, #1f3a5f);
  background: transparent;
  border-color: color-mix(
    in srgb,
    var(--color-primary, #1f3a5f) 35%,
    transparent
  );
}

.btn-outline-custom:hover {
  color: var(--color-text-light, #ffffff);
  background: var(--color-primary, #1f3a5f);
  border-color: var(--color-primary, #1f3a5f);
}

/* =========================================================
   5. Ghost Button
========================================================= */

.btn-ghost-custom {
  color: var(--color-text, #1f2933);
  background: transparent;
  border-color: transparent;
}

.btn-ghost-custom:hover {
  color: var(--color-primary, #1f3a5f);
  background: color-mix(in srgb, var(--color-primary, #1f3a5f) 8%, transparent);
}

/* =========================================================
   6. Light Button for Dark / Image Backgrounds
========================================================= */

.btn-light-custom {
  color: var(--color-text, #1f2933);
  background: var(--color-surface, #ffffff);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(16, 24, 40, 0.08));
}

.btn-light-custom:hover {
  color: var(--color-primary, #1f3a5f);
  background: #ffffff;
  box-shadow: var(--shadow-md, 0 12px 28px rgba(16, 24, 40, 0.1));
}

/* =========================================================
   7. Accent Button
========================================================= */

.btn-accent-custom {
  color: var(--color-text, #1f2933);
  background: var(--color-accent, #c9a227);
  border-color: var(--color-accent, #c9a227);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(16, 24, 40, 0.08));
}

.btn-accent-custom:hover {
  color: var(--color-text, #1f2933);
  background: var(--color-accent-dark, #9f7f1d);
  border-color: var(--color-accent-dark, #9f7f1d);
  box-shadow: var(--shadow-md, 0 12px 28px rgba(16, 24, 40, 0.1));
}

/* =========================================================
   8. Danger Button
========================================================= */

.btn-danger-custom {
  color: #ffffff;
  background: var(--color-danger, #b42318);
  border-color: var(--color-danger, #b42318);
}

.btn-danger-custom:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--color-danger, #b42318) 86%, #000000);
  border-color: color-mix(in srgb, var(--color-danger, #b42318) 86%, #000000);
}

/* =========================================================
   9. Success Button
========================================================= */

.btn-success-custom {
  color: #ffffff;
  background: var(--color-success, #2f7d4f);
  border-color: var(--color-success, #2f7d4f);
}

.btn-success-custom:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--color-success, #2f7d4f) 86%, #000000);
  border-color: color-mix(in srgb, var(--color-success, #2f7d4f) 86%, #000000);
}

/* =========================================================
   10. Button Sizes
========================================================= */

.btn-sm-custom {
  min-height: 36px;
  padding: 0.625rem 0.875rem;
  font-size: var(--text-xs, 0.75rem);
}

.btn-md-custom {
  min-height: 44px;
  padding: 0.875rem 1.25rem;
  font-size: var(--text-sm, 0.875rem);
}

.btn-lg-custom {
  min-height: 52px;
  padding: 1rem 1.5rem;
  font-size: var(--text-base, 1rem);
}

.btn-xl-custom {
  min-height: 58px;
  padding: 1.125rem 1.75rem;
  font-size: var(--text-md, 1.125rem);
}

/* =========================================================
   11. Button Shapes
========================================================= */

.btn-pill-custom {
  border-radius: var(--radius-full, 999px);
}

.btn-rounded-custom {
  border-radius: var(--radius-lg, 1rem);
}

.btn-square-custom {
  border-radius: var(--radius-sm, 0.5rem);
}

/* =========================================================
   12. Icon Button
========================================================= */

.btn-icon-custom {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full, 999px);
}

.btn-icon-sm-custom {
  width: 36px;
  height: 36px;
}

.btn-icon-lg-custom {
  width: 52px;
  height: 52px;
}

/* =========================================================
   13. Full Width Button
========================================================= */

.btn-block-custom {
  width: 100%;
}

/* =========================================================
   14. Button Group
========================================================= */

.btn-group-custom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  align-items: center;
}

.btn-group-custom.center {
  justify-content: center;
}

.btn-group-custom.end {
  justify-content: flex-end;
}

/* =========================================================
   15. CTA Button Pair
========================================================= */

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  align-items: center;
}

.cta-actions.center {
  justify-content: center;
}

/* =========================================================
   16. Link Button
========================================================= */

.btn-link-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0;
  border: 0;
  background: transparent;

  color: var(--color-primary, #1f3a5f);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}

.btn-link-custom:hover {
  color: var(--color-primary-dark, #142740);
  text-decoration: underline;
}

.btn-link-custom::after {
  content: "→";
  transition: transform var(--transition-base, 220ms ease);
}

.btn-link-custom:hover::after {
  transform: translateX(3px);
}

/* =========================================================
   17. Admin Action Buttons
========================================================= */

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;

  min-height: 34px;
  padding: 0.5rem 0.75rem;

  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--radius-sm, 0.5rem);

  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.2;
  text-decoration: none;

  color: var(--admin-text, #111827);
  background: var(--admin-surface, #ffffff);

  transition:
    background-color var(--transition-base, 220ms ease),
    border-color var(--transition-base, 220ms ease),
    color var(--transition-base, 220ms ease);
}

.admin-btn:hover {
  text-decoration: none;
  background: #f9fafb;
}

.admin-btn-primary {
  color: #ffffff;
  background: var(--admin-primary, #2563eb);
  border-color: var(--admin-primary, #2563eb);
}

.admin-btn-primary:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--admin-primary, #2563eb) 86%, #000000);
  border-color: color-mix(in srgb, var(--admin-primary, #2563eb) 86%, #000000);
}

.admin-btn-danger {
  color: #ffffff;
  background: var(--admin-danger, #dc2626);
  border-color: var(--admin-danger, #dc2626);
}

.admin-btn-danger:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--admin-danger, #dc2626) 86%, #000000);
  border-color: color-mix(in srgb, var(--admin-danger, #dc2626) 86%, #000000);
}

.admin-btn-success {
  color: #ffffff;
  background: var(--admin-success, #16a34a);
  border-color: var(--admin-success, #16a34a);
}

.admin-btn-success:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--admin-success, #16a34a) 86%, #000000);
  border-color: color-mix(in srgb, var(--admin-success, #16a34a) 86%, #000000);
}

/* =========================================================
   18. WhatsApp / Phone / Maps Buttons
========================================================= */

.btn-whatsapp {
  color: #ffffff;
  background: #25d366;
  border-color: #25d366;
}

.btn-whatsapp:hover {
  color: #ffffff;
  background: #1fb85a;
  border-color: #1fb85a;
}

.btn-phone {
  color: var(--color-text-light, #ffffff);
  background: var(--color-secondary, #3f6b57);
  border-color: var(--color-secondary, #3f6b57);
}

.btn-phone:hover {
  color: var(--color-text-light, #ffffff);
  background: var(--color-secondary-dark, #2d4c3e);
  border-color: var(--color-secondary-dark, #2d4c3e);
}

.btn-map {
  color: var(--color-text-light, #ffffff);
  background: var(--color-primary, #1f3a5f);
  border-color: var(--color-primary, #1f3a5f);
}

.btn-map:hover {
  color: var(--color-text-light, #ffffff);
  background: var(--color-primary-dark, #142740);
  border-color: var(--color-primary-dark, #142740);
}

/* =========================================================
   19. Responsive Buttons
========================================================= */

@media (max-width: 768px) {
  .btn-group-custom,
  .cta-actions {
    align-items: stretch;
  }

  .btn-group-custom.mobile-stack,
  .cta-actions.mobile-stack {
    flex-direction: column;
  }

  .btn-group-custom.mobile-stack .btn-custom,
  .cta-actions.mobile-stack .btn-custom {
    width: 100%;
  }

  .admin-actions {
    width: 100%;
  }

  .admin-actions .admin-btn {
    flex: 1 1 auto;
  }
}

/* =========================================================
   20. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .btn-custom,
  .btn-link-custom::after,
  .admin-btn {
    transition: none !important;
  }

  .btn-custom:hover,
  .btn-link-custom:hover::after {
    transform: none !important;
  }
}