/* ===================================================
   mini.css — replaces Bootstrap grid + utilities
   =================================================== */

/* Grid */
.row { display:flex; flex-wrap:wrap; margin:0 -12px; }
.row > * { padding:0 12px; width:100%; box-sizing:border-box; }
.g-4  { row-gap:24px; }
.g-md-5 { row-gap:30px; }

@media(min-width:768px){
  .col-md-6  { width:50%; }
  .px-md-5   { padding-left:3rem!important; padding-right:3rem!important; }
  .d-md-block  { display:block!important; }
  .d-md-none   { display:none!important; }
  .d-md-inline { display:inline!important; }
}
@media(min-width:992px){
  .col-lg-4  { width:33.333333%; }
}

/* Utilities */
.d-none { display:none!important; }
.me-2   { margin-right:.5rem!important; }
.mt-1   { margin-top:.25rem!important; }
.mt-2   { margin-top:.5rem!important; }

/* ===================================================
   Native <dialog> modal styles
   =================================================== */
dialog.enhanced-modal {
  border: none;
  padding: 0;
  max-width: 900px;
  width: 90%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(196, 30, 58, 0.35);
  /* Remove all manual position/transform — showModal() handles centering */
  margin: auto; /* fallback for browsers that need it */
}

dialog.enhanced-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: backdropIn 0.25s ease both;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The bounce-in animation — applied to the dialog itself */
dialog.enhanced-modal[open] {
  animation: modalPopIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(28px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 768px) {
  dialog.enhanced-modal {
    width: 95%;
    max-height: 92vh;
    overflow-y: auto;
   
  }
}