/* ==================================================
   Cántico de Fe Music
   V11.3 — Modal Engine & Global Search Experience
   ================================================== */

.cantico-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: grid;
  place-items: center;

  padding: 20px;

  background:
    rgba(6, 35, 63, .68);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  animation:
    cantico-modal-backdrop-in .2s ease;
}

.cantico-modal {
  width: min(100%, 520px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  background: #ffffff;
  color: #102a43;

  border:
    1px solid #eadca6;
  border-radius: 24px;

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, .32);

  animation:
    cantico-modal-in .22s ease;
}

.cantico-modal:has(.global-search) {
  width: min(100%, 760px);
}

.cantico-modal__header {
  padding:
    24px 24px 10px;
}

.cantico-modal__header h2 {
  margin: 0;

  font-size:
    clamp(1.35rem, 4vw, 1.8rem);

  color: #0b3558;
}

.cantico-modal__content {
  padding:
    12px 24px 22px;
}

.cantico-modal__content p {
  margin-top: 0;
  line-height: 1.6;
}

.cantico-modal__content label {
  display: block;

  margin-bottom: 8px;

  color: #0b3558;
  font-weight: 800;
}

.cantico-modal__content input {
  width: 100%;
  min-height: 50px;

  box-sizing: border-box;

  padding:
    13px 16px;

  border:
    1px solid #eadca6;
  border-radius: 14px;

  background: #fffdf8;
  color: #102a43;

  font: inherit;

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

.cantico-modal__content input:hover {
  border-color: #d7b44b;
  background: #ffffff;
}

.cantico-modal__content input:focus {
  outline: none;

  border-color: #c68a00;

  box-shadow:
    0 0 0 4px
    rgba(198, 138, 0, .14);
}

.cantico-modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;

  padding:
    18px 24px 24px;

  border-top:
    1px solid #f1e7c5;
}

.cantico-modal__actions button {
  min-height: 44px;

  padding:
    10px 18px;

  border:
    1px solid #eadca6;
  border-radius: 999px;

  background: #fffaf0;
  color: #0b3558;

  font: inherit;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.cantico-modal__actions button:hover {
  transform:
    translateY(-2px);

  border-color: #d7b44b;
}

.cantico-modal__actions button:active {
  transform:
    scale(.97);
}

.cantico-modal__actions button:focus-visible {
  outline:
    3px solid
    rgba(198, 138, 0, .28);

  outline-offset: 3px;
}

.cantico-modal__actions
[data-modal-create-playlist] {
  border-color: #0b3558;
  background: #0b3558;
  color: #ffffff;

  box-shadow:
    0 8px 18px
    rgba(11, 53, 88, .18);
}

.cantico-modal__actions
[data-modal-create-playlist]:hover {
  background: #124a76;

  box-shadow:
    0 12px 24px
    rgba(11, 53, 88, .24);
}

/* ==================================================
   V11.3 — Global Search Experience Pro
   ================================================== */

.global-search {
  display: grid;
  gap: 13px;
}

.global-search > label {
  margin: 0;

  color: #0b3558;
  font-size: .92rem;
  font-weight: 800;
}

.global-search input[type="search"] {
  min-height: 56px;

  padding:
    14px 18px 14px 46px;

  border-radius: 17px;

  background-color: #fffdf8;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b3558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position:
    16px center;
  background-size:
    20px 20px;

  font-size: 1rem;
}

.global-search input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

.global-search-shortcut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  color: #52667a;

  font-size: .78rem;
  line-height: 1.3;
}

.global-search-shortcut span {
  padding:
    5px 9px;

  border:
    1px solid #eadca6;
  border-radius: 999px;

  background: #fffaf0;
}

.global-search-summary {
  min-height: 20px;

  color: #52667a;

  font-size: .86rem;
  font-weight: 700;
}

.global-search-results {
  max-height:
    min(54vh, 520px);

  overflow-y: auto;
  overscroll-behavior: contain;

  padding-right: 4px;

  scrollbar-width: thin;
  scrollbar-color:
    #d7b44b #fffaf0;
}

.global-search-results::-webkit-scrollbar {
  width: 9px;
}

.global-search-results::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #fffaf0;
}

.global-search-results::-webkit-scrollbar-thumb {
  border: 2px solid #fffaf0;
  border-radius: 999px;

  background: #d7b44b;
}

.global-search-results > p {
  margin: 4px 0 0;

  padding: 20px;

  border:
    1px dashed #eadca6;
  border-radius: 16px;

  background: #fffdf8;
  color: #52667a;

  text-align: center;
}

.global-search-group {
  padding:
    4px 0 14px;
}

.global-search-group +
.global-search-group {
  padding-top: 16px;

  border-top:
    1px solid #f1e7c5;
}

.global-search-group__title {
  display: flex;
  align-items: center;
  gap: 7px;

  margin:
    0 0 9px;

  color: #c68a00;

  font-size: .76rem;
  font-weight: 900;

  letter-spacing: .14em;
  text-transform: uppercase;
}

.global-search-group__title span:first-child {
  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;

  border-radius: 8px;

  background: #fff3c4;
  color: #0b3558;

  font-size: .82rem;
  letter-spacing: normal;
}

.global-search-group__results {
  display: grid;
  gap: 8px;
}

.global-search-result {
  position: relative;

  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr);

  gap: 11px;
  align-items: center;

  padding:
    12px 44px 12px 12px;

  border:
    1px solid transparent;
  border-radius: 15px;

  background: #fffaf0;
  color: #102a43;

  text-decoration: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.global-search-result::after {
  content: "→";

  position: absolute;
  top: 50%;
  right: 16px;

  color: #c68a00;

  font-size: 1.1rem;
  font-weight: 900;

  transform:
    translateY(-50%);

  transition:
    transform .18s ease,
    color .18s ease;
}

.global-search-result:hover,
.global-search-result.is-active {
  transform:
    translateY(-2px);

  border-color: #d7b44b;
  background: #fff6d8;

  box-shadow:
    0 8px 20px
    rgba(16, 42, 67, .09);
}

.global-search-result.is-active {
  border-color: #c68a00;

  box-shadow:
    0 0 0 3px
    rgba(198, 138, 0, .12),
    0 8px 20px
    rgba(16, 42, 67, .10);
}

.global-search-result:hover::after,
.global-search-result.is-active::after {
  color: #0b3558;

  transform:
    translate(3px, -50%);
}

.global-search-result:focus-visible {
  outline:
    3px solid
    rgba(198, 138, 0, .28);

  outline-offset: 2px;

  border-color: #c68a00;
}

.global-search-result__icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  background: #0b3558;
  color: #f4d06f;

  font-size: 1rem;
  font-weight: 900;

  box-shadow:
    0 5px 12px
    rgba(11, 53, 88, .14);
}

.global-search-result__content {
  display: grid;
  gap: 4px;

  min-width: 0;
}

.global-search-result__title {
  min-width: 0;

  color: #0b3558;

  font-size: .98rem;
  line-height: 1.3;
}

.global-search-result__description {
  display: -webkit-box;
  overflow: hidden;

  color: #52667a;

  font-size: .87rem;
  line-height: 1.45;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.global-search-highlight {
  padding:
    0 .12em;

  border-radius: 4px;

  background: #f4d06f;
  color: #06233f;

  font-weight: 900;
}

.global-search-empty {
  padding: 22px;

  border:
    1px dashed #eadca6;
  border-radius: 16px;

  background: #fffdf8;
  color: #52667a;

  text-align: center;
}

.global-search-empty p {
  margin: 0;
}

.global-search-empty strong {
  color: #0b3558;
}

/* ==================================================
   Animations
   ================================================== */

@keyframes cantico-modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cantico-modal-in {
  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(.97);
  }

  to {
    opacity: 1;

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

/* ==================================================
   Responsive
   ================================================== */

@media (max-width: 700px) {
  .cantico-modal:has(.global-search) {
    width: 100%;
  }

  .global-search-results {
    max-height: 50vh;
  }
}

@media (max-width: 520px) {
  .cantico-modal-backdrop {
    align-items: end;

    padding: 10px;
  }

  .cantico-modal {
    width: 100%;
    max-height:
      calc(100vh - 20px);

    border-radius:
      22px 22px 16px 16px;
  }

  .cantico-modal__header {
    padding:
      21px 18px 8px;
  }

  .cantico-modal__content {
    padding:
      10px 18px 18px;
  }

  .cantico-modal__actions {
    padding:
      16px 18px 20px;
  }

  .cantico-modal__actions button {
    flex: 1 1 auto;
  }

  .global-search input[type="search"] {
    min-height: 52px;

    padding:
      13px 15px 13px 43px;

    background-position:
      14px center;
  }

  .global-search-shortcut {
    gap: 6px;

    font-size: .72rem;
  }

  .global-search-shortcut span {
    padding:
      4px 7px;
  }

  .global-search-results {
    max-height: 47vh;
  }

  .global-search-result {
    grid-template-columns:
      34px minmax(0, 1fr);

    gap: 9px;

    padding:
      11px 39px 11px 10px;
  }

  .global-search-result__icon {
    width: 34px;
    height: 34px;

    border-radius: 10px;
  }

  .global-search-result::after {
    right: 13px;
  }
}

/* ==================================================
   Reduced Motion
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  .cantico-modal-backdrop,
  .cantico-modal {
    animation: none;
  }

  .cantico-modal__actions button,
  .global-search-result,
  .global-search-result::after {
    transition: none;
  }

  .global-search-result:hover,
  .global-search-result.is-active {
    transform: none;
  }

  .global-search-result:hover::after,
  .global-search-result.is-active::after {
    transform:
      translateY(-50%);
  }
}