/* ========= Buttons ========= */
:root{
  --btn-radius: .25rem;
  --btn-pad-y: .625rem;
  --btn-pad-x: 1rem;
  --btn-fg-on-dark: #0b0b0b;
  --btn-fg-on-light: #fff;

  /* Palette (tweak to your brand) */
  --c-primary: var(--primary-500);
  /* --c-primary: #2cd89f; */
  --c-secondary: #8cbcd4;
  --c-accent: #2eaccc;
  --c-success: #22c55e;
  --c-warning: #f5a524;
  --c-danger:  #e5484d;
  --c-neutral: #111;     /* text on light */
  --c-muted:   #f2f2f3;  /* ghost bg on light */
}

@media (prefers-color-scheme: dark){
  :root{
    --c-neutral: #f5f5f7;   /* text on dark */
    --c-muted:   #1b1b1b;   /* ghost bg on dark */
  }
}

/* Base */
.modal-btn{
  --btn-bg: #eee;
  --btn-fg: var(--c-neutral);
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.modal-btn-center{
  margin: 0 auto;
}

.modal-btn:active{
  transform: translateY(1px);
}

/* Sizes */
.modal-btn--sm{ padding: .5rem .75rem; font-size: .9rem; }
.modal-btn--lg{ padding: .8rem 1.25rem; font-size: 1.05rem; }

/* Variants (use color-mix to gently darken on hover) */
.modal-btn--primary   { --btn-bg: var(--c-primary);   --btn-fg: var(--btn-fg-on-light); }
.modal-btn--secondary { --btn-bg: var(--c-secondary); --btn-fg: var(--btn-fg-on-light); }
.modal-btn--accent    { --btn-bg: var(--c-accent);    --btn-fg: var(--btn-fg-on-light); }
.modal-btn--success   { --btn-bg: var(--c-success);   --btn-fg: var(--btn-fg-on-light); }
.modal-btn--warning   { --btn-bg: var(--c-warning);   --btn-fg: #0b0b0b; }
.modal-btn--danger    { --btn-bg: var(--c-danger);    --btn-fg: var(--btn-fg-on-light); }

/* Ghost = subtle filled on hover */
.modal-btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--c-muted);
  --btn-bd: color-mix(in srgb, var(--c-muted) 22%, transparent);
  background: transparent;
}
.modal-btn--ghost:hover{
  background: color-mix(in srgb, var(--c-neutral) 8%, transparent);
}

/* Hover darken (works great in modern browsers) */
.modal-btn--primary:hover   { background: color-mix(in srgb, var(--c-primary) 86%, black 14%); }
.modal-btn--secondary:hover { background: color-mix(in srgb, var(--c-secondary) 86%, black 14%); }
.modal-btn--accent:hover    { background: color-mix(in srgb, var(--c-accent) 86%, black 14%); }
.modal-btn--success:hover   { background: color-mix(in srgb, var(--c-success) 86%, black 14%); }
.modal-btn--warning:hover   { background: color-mix(in srgb, var(--c-warning) 86%, black 14%); }
.modal-btn--danger:hover    { background: color-mix(in srgb, var(--c-danger) 86%, black 14%); }

/* Outline styles */
.modal-btn--outline{
  background: transparent;
  --btn-fg: var(--c-neutral);
  --btn-bd: currentColor;
}
.modal-btn--outline:hover{
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.modal-btn--outline-danger{
  background: transparent;
  --btn-fg: var(--c-danger);
  --btn-bd: var(--c-danger);
}
.modal-btn--outline-danger:hover{
  background: color-mix(in srgb, var(--c-danger) 10%, transparent);
}

.modal-btn--outline-primary{
  background: transparent;
  --btn-fg: var(--c-primary);
  --btn-bd: var(--c-primary);
}
.modal-btn--outline-primary:hover{
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
}

.modal-btn--outline-secondary{
  background: transparent;
  --btn-fg: var(--c-secondary);
  --btn-bd: var(--c-secondary);
}
.modal-btn--outline-secondary:hover{
  background: color-mix(in srgb, var(--c-secondary) 10%, transparent);
}

.modal-btn--outline-accent{
  background: transparent;
  --btn-fg: var(--c-accent);
  --btn-bd: var(--c-accent);
}
.modal-btn--outline-accent:hover{
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}











/* Scroll lock when any modal is open */
.modal-lock, .modal-lock body { overflow: hidden; }

/* Backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  pointer-events: none;
  place-items: center;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: .25s ease;
  z-index: 1000; /* above your UI */
}


.modal-backdrop.is-open { 
  opacity: 1; 
  display: grid;
  pointer-events: auto;
  backdrop-filter: blur(3px);
}

/* Dialog */
.modal {
  width: 90%;
  max-width: 36rem; /* md default ~576px */
  margin: 1rem;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: .25s ease;
}

.modal-backdrop.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal--sm { max-width: 26rem; }
.modal--md { max-width: 36rem; }
.modal--lg { max-width: 48rem; }
.modal--xl { max-width: 64rem; }

.modal__inner {
  background: var(--modal-bg, #ffffff99);
  color: var(--modal-fg, #111);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  outline: none;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

.modal__header,
.modal__footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modal__footer { border-top: 1px solid rgba(0,0,0,0.08); border-bottom: none; }

.modal__title {
  font-size: 1.125rem;
  margin: 0;
  font-weight: 600;
}

.modal__body {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  overflow: auto;
}

/* Close button */
.modal__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgb(0, 0, 0);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: .25rem .5rem;
  border-radius: 8px;
}
.modal__close:hover { background: rgba(0,0,0,0.06); }

/* Prefer dark mode automatically if your site uses it */
@media (prefers-color-scheme: dark) {
  .modal__inner {
    --modal-bg: #161616cc;
    --modal-fg: #f2f2f2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  }
  .modal__header, .modal__footer {
    border-color: rgba(255,255,255,0.08);
  }
  .modal__close{
    color: white;
  }
  .modal__close:hover { 
    background: rgba(255,255,255,0.06); 
  }

  .modal-btn--ghost{
    --btn-bg: transparent;
    --btn-fg: var(--c-neutral);
    --btn-bd: color-mix(in srgb, var(--c-neutral) 22%, transparent);
    background: transparent;
  }
}