/* ====================================================
   PARTNER DIRECTORY PAGE — page-specific styles
   ====================================================
   Shared components (card-glass, badge-primary, tag-pill,
   reveal, animate-float, scroll-top-btn) live in the global
   stylesheets loaded via styles.css — only this page's unique
   directory-card/modal rules live here.
*/

/* ====== DIRECTORY CARD ====== */
.dir-card { cursor: pointer; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.dir-card:hover {
  transform: translateY(-5px);
  border-color: #93C5FD;
  box-shadow: 0 14px 34px rgba(59,130,246,0.12), 0 3px 10px rgba(0,0,0,0.05);
}
.dir-card:hover .dir-arrow { opacity: 1; transform: translate(0,0); }
.dir-arrow { opacity: 0; transform: translate(-6px,0); transition: opacity 0.3s ease, transform 0.3s ease; }

/* Prominent logo band */
.dir-logo-band {
  height: 108px;
  background:
    radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid #EEF2F7;
  transition: background 0.3s ease;
}
.dir-card:hover .dir-logo-band { background: radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #EFF6FF 100%); }
.dir-logo-img {
  max-height: 60px;
  max-width: 78%;
  object-fit: contain;
  transition: transform 0.35s ease;
  filter: saturate(1);
}
.dir-card:hover .dir-logo-img { transform: scale(1.06); }
.dir-logo-initial {
  width: 64px; height: 64px; border-radius: 14px;
  background: #EFF6FF; border: 1px solid #DBEAFE; color: #1D4ED8;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 28px;
  transition: transform 0.35s ease;
}
.dir-card:hover .dir-logo-initial { transform: scale(1.06); }

/* Flag chip — directory grid variant (20×14).
   flag_chip() (app/Helpers/flag_helper.php) always emits class="flag-img"
   and is also called from home.php, so this is scoped to .dir-card's
   descendant .flag-img rather than renaming the shared helper's output.
   .dir-flag-img covers the modal's JS-templated flag <img>, which this
   view builds directly and can name itself. */
.dir-card .flag-img,
.dir-flag-img {
  width: 20px; height: 14px; object-fit: cover;
  border-radius: 2px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.10);
}

/* ====== PARTNER MODAL ====== */
.partner-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.partner-modal.active { opacity: 1; visibility: visible; }
.partner-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); }
.partner-modal-panel {
  position: relative; z-index: 2;
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: #FFFFFF; border-radius: 1rem; border: 1px solid #E2E8F0;
  box-shadow: 0 30px 70px rgba(15,23,42,0.28);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.partner-modal.active .partner-modal-panel { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 36px; height: 36px; border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: #E2E8F0; color: #0F172A; }