// :host {
//   display: contents;
// }

// :host(.modern-modal) .ti-modal-content {
//   border-radius: 1rem !important;
//   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
//   border-color: var(--color-defaultborder) !important;

//   &:where(.dark, .dark *) {
//     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
//   }
// }

// :host(.modern-modal) .ti-modal-header {
//   padding-inline: 1.5rem !important;
//   padding-block: 1.25rem !important;
//   border-color: var(--color-defaultborder) !important;
// }

// :host(.modern-modal) .ti-modal-title {
//   font-size: 1.125rem !important;
//   font-weight: 600 !important;
//   color: var(--color-gray-800) !important;

//   &:where(.dark, .dark *) {
//     color: var(--color-white) !important;
//   }
// }

// :host(.modern-modal) .ti-modal-close-btn {
//   border-radius: 0.5rem !important;
//   color: var(--color-gray-500) !important;
//   transition: all 0.2s ease !important;

//   &:hover {
//     color: var(--color-primary) !important;
//     background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
//   }
// }

// :host(.modern-modal) .ti-modal-body {
//   padding: 1.5rem !important;
// }

// :host(.modern-modal) .ti-modal-footer {
//   padding-inline: 1.5rem !important;
//   padding-block: 1rem !important;
//   gap: 0.75rem !important;
//   border-color: var(--color-defaultborder) !important;
// }


/* ==========================================================
   Overlay
========================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 1.5rem;

  animation: modalFade .22s ease;
}

/* ==========================================================
   Backdrop
========================================================== */

.modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(15, 23, 42, .42);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ==========================================================
   Wrapper
========================================================== */

.modern-modal-wrapper {

  position: relative;

  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: auto;

  animation: modalSlide .28s ease;
}

/* ==========================================================
   Modal
========================================================== */

.modern-modal {

  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  max-height: 90vh;

  overflow: hidden;

  border-radius: 20px;

  background: #ffffff;

  // border: 1px solid #edf2f7;

  box-shadow:
    0 15px 40px rgba(15, 23, 42, .10),
    0 30px 80px rgba(15, 23, 42, .14);

}

/* ==========================================================
   Header
========================================================== */

.modern-modal-header {

  position: relative;

  overflow: hidden;

  border-bottom: 1px solid rgba(255, 255, 255, .08);

  // background: linear-gradient(135deg,
  //     #020617 0%,
  //     #172554 40%,
  //     #4338CA 75%,
  //     #7C3AED 100%);
  // background: linear-gradient(135deg,
  //   #111C43 0%,
  //   #16285c 55%,
  //   #1d3578 100%);
  background-color: #7c3deb;

  isolation: isolate;
}

/* Decorative Background */
.modal-header-bg {

  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

/* Left Glow */

.modal-header-bg::before {

  content: "";

  position: absolute;

  width: 280px;

  height: 280px;

  left: -120px;

  top: -120px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .14),
      transparent 72%);

  filter: blur(8px);
}

/* Right Glow */

.modal-header-bg::after {

  content: "";

  position: absolute;

  width: 240px;

  height: 240px;

  right: -80px;

  top: -90px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(91, 140, 255, .25),
      transparent 72%);

  filter: blur(10px);
}

.modern-modal-header::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .18),
      transparent);
}

/* Header Layout */

.modal-header-content {

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 10px 2rem;
}

.modal-header-left {

  display: flex;

  align-items: center;

  gap: 18px;

  min-width: 0;

  flex: 1;
}

/* ==========================================================
   Icon
========================================================== */

.modal-icon {

  flex-shrink: 0;
}

.modal-icon-inner {

  width: 40px;

  height: 40px;

  border-radius: 12px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #ffffff;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .18),
      rgba(255, 255, 255, .06));

  border: 1px solid rgba(255, 255, 255, .18);

  backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .15),
    0 10px 30px rgba(0, 0, 0, .25);
}

.modal-icon-inner i {

  font-size: 17px;
}

/* ==========================================================
   Title
========================================================== */

.modal-title-wrapper {

  min-width: 0;
}

.modern-modal-title {

  margin: 0;

  color: #ffffff;

  font-size: 17px;

  font-weight: 700;

  letter-spacing: -.4px;

  line-height: 1.3;
}

.modern-modal-subtitle {

  margin-top: .45rem;

  color: rgba(255, 255, 255, .72);

  font-size: .9rem;

  line-height: 1.6;
}

/* ==========================================================
   Close
========================================================== */

.modern-close-btn {

  width: 25px;

  height: 25px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #ffffff;

  background: rgba(255, 255, 255, .08);

  // border: 1px solid rgba(255, 255, 255, .12);

  backdrop-filter: blur(8px);

  transition: .28s;
}

.modern-close-btn:hover {

  background: rgba(255, 255, 255, .18);

  transform: rotate(90deg) scale(1.05);

  border-color: rgba(255, 255, 255, .25);
}

.modern-close-btn i {

  font-size: 16px;
}

/* ==========================================================
   Body
========================================================== */

.modern-modal-body {

  flex: 1;

  overflow: auto;

  padding: 2rem;
}

.modal-content-wrapper {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;
}

/* Scroll */

.modern-modal-body::-webkit-scrollbar {

  width: 7px;
}

.modern-modal-body::-webkit-scrollbar-thumb {

  background: #d4dbe6;

  border-radius: 20px;
}

.modern-modal-body::-webkit-scrollbar-thumb:hover {

  background: #b8c3d3;
}

/* ==========================================================
   Footer
========================================================== */
/* Footer */

.modern-modal-footer {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 12px;

  padding: 5px 2rem;

  border-top: 1px solid #edf2f7;

  background: #ffffff;
}


/* ============================
   Cancel Button
============================ */


::ng-deep .modern-modal-footer app-button:first-child button {


  height: 36px;

  padding: 0 16px;

  border-radius: 10px;

  border: 1px solid #dbe3ef;

  background: #ffffff;

  color: #475569;

  font-weight: 600;

  font-size: 13px;

  transition: .3s ease;

}


::ng-deep .modern-modal-footer app-button:first-child button:hover {


  background: #f8fafc;

  border-color: #cbd5e1;

  transform: translateY(-2px);

}



/* ============================
   Save Button
============================ */


::ng-deep .modern-modal-footer app-button:last-child button {


  position: relative;

  overflow: hidden;

  height: 36px;

  padding: 0 16px;

  border-radius: 10px;

  border: none;


  color: #ffffff;


  // background:

  //   linear-gradient(135deg,
  //     #111C43,
  //     #2563eb);
  background: #7c3deb;

  box-shadow:

    0 8px 20px rgba(125, 61, 235, 0.468);


  font-weight: 600;

  font-size: 13px;


  transition: .35s ease;

}



::ng-deep .modern-modal-footer app-button:last-child button:hover {


  transform: translateY(-3px);


  box-shadow:

    0 12px 28px rgba(37, 99, 235, .45);

}



/* ============================
   Shine Animation
============================ */


::ng-deep .modern-modal-footer app-button:last-child button::before {


  content: "";


  position: absolute;


  top: 0;

  left: -120%;


  width: 70%;


  height: 100%;


  background:

    linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, .55),
      transparent);


  transform: skewX(-25deg);


  animation: saveButtonShine 2s infinite;

}



@keyframes saveButtonShine {


  0% {

    left: -120%;

  }


  40% {

    left: 130%;

  }


  100% {

    left: 130%;

  }

}


/* Disabled */

::ng-deep .modern-modal-footer button:disabled {


  opacity: .55;

  cursor: not-allowed;

  transform: none !important;

  box-shadow: none !important;

}

::ng-deep .modern-modal-footer app-button button {

  height: 36px;

  padding: 0 16px;

  border-radius: 10px;

  font-size: 13px;

  font-weight: 600;

  transition: .3s ease;

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px) {

  .modal-overlay {

    padding: 1rem;
  }

  .modern-modal {

    border-radius: 18px;

    max-height: 95vh;
  }

  .modal-header-content {

    padding: 1em;
  }

  .modal-icon-inner {

    width: 48px;
    height: 48px;

    border-radius: 14px;
  }

  .modern-modal-title {

    font-size: 12px;
  }

  .modern-modal-body {

    padding: 1.2rem;
  }

  .modern-modal-footer {

    padding: 1rem 1.2rem;

    flex-wrap: wrap;
  }

}

/* ==========================================================
   Animation
========================================================== */

@keyframes modalFade {

  from {

    opacity: 0;
  }

  to {

    opacity: 1;
  }

}

@keyframes modalSlide {

  from {

    opacity: 0;

    transform: translateY(20px) scale(.98);
  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);
  }

}