/* ===========================
   Silk Modal Base Styles
   =========================== */

.silk-modal-wrapper {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;                  /* ensure flex centering */
  justify-content: center;
  align-items: flex-start;
  padding-top: 15%;
  z-index: 99999;                 /* higher than headers/menus */
}

.silk-modal-content {
  padding: 20px;
/*  max-width: 1200px; */
  width: auto;                     /* responsive centering */
  position: relative;
  animation: fadeIn 0.3s ease;
}

.silk-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 10px;
  color: inherit;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Theme Variations
   =========================== */

/* Classic Theme */
.silk-modal-wrapper.classic .silk-modal-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  color: #333;
}

/* Minimal Theme */
.silk-modal-wrapper.minimal .silk-modal-content {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  font-family: sans-serif;
  box-shadow: none;
  color: #222;
}

/* Dark Glass Theme */
.silk-modal-wrapper.darkglass .silk-modal-content {
  background: rgba(30,30,30,0.85);
  color: #fff;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 30px rgba(0,0,0,0.5);
}

/* Silk Dark Theme */
.silk-modal-wrapper.silk-dark .silk-modal-content {
  background: #0a1128;
  color: #fff;
  border-radius: 12px;
  border: 3px solid #ff286e;
  box-shadow: 0 8px 25px rgba(10,17,40,0.6);
  font-family: "Open Sans", sans-serif;
}
.silk-modal-wrapper.silk-dark .silk-modal-content h2 {
  color: #ff286e;
}
.silk-modal-wrapper.silk-dark .silk-modal-close {
  color: #ff286e;
}

/* Silk Light Theme */
.silk-modal-wrapper.silk-light .silk-modal-content {
  background: #fff;
  color: #0a1128;
  border-radius: 12px;
  border: 3px solid #ff286e;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  font-family: "Open Sans", sans-serif;
}
.silk-modal-wrapper.silk-light .silk-modal-content h2 {
  color: #ff286e;
}
.silk-modal-wrapper.silk-light .silk-modal-close {
  color: #ff286e;
}

/* Frameless Theme */
.silk-modal-wrapper.frameless .silk-modal-content {
  background: none;
  border: none;
  padding: 0;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.silk-modal-wrapper.frameless .silk-modal-close {
  color: #ff286e;
  font-size: 28px;
}