/* assets/css/explore-rends.css */
/* on ne montre plus l'avatar */
.p2p-card .card-media { display:none !important; }

.p2p-card .card-head {
  font-weight: 600;
  margin: 0 0 .25rem;
  line-height: 1.3;
}

.p2p-card .card-tags .tag { white-space: nowrap; }

.p2p-explore--rends .p2p-explore-nav {
  display: flex; gap: .5rem; margin-bottom: .75rem;
}
.p2p-explore--rends .tab-btn {
  padding: .5rem .75rem; border: 1px solid #F0E8D5; border-radius: 8px; background: #9A031E; cursor: pointer; color: #F0E8D5;
}
.p2p-explore--rends .tab-btn.is-active { border-color: #F0E8D5;background: #F0E8D5; color: #9A031E;}

.p2p-explore--rends .p2p-explore-filters {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)) auto; gap: .5rem; margin: .5rem 0 1rem;
}
.p2p-explore--rends .p2p-explore-filters .row { display:flex; flex-direction:column; gap:.25rem; }
.p2p-explore--rends .btn { padding:.5rem .75rem; border-radius:8px; border:1px solid #333; background:#333; color:#F0E8D5; }

.p2p-grid { display:flex; flex-wrap: wrap; gap: 24px; justify-content: space-between !important;}
.p2p-card { border-radius:14px; overflow:hidden; background:#F0E8D5; display:flex; flex-direction:column; }
.p2p-card .card-link { display:flex; flex-direction:column; color:inherit; text-decoration:none; height:100%; }
.p2p-card .card-media { aspect-ratio: 16/9; background:#f5f5f5; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.p2p-card .card-media img { width:100%; height:100%; object-fit:cover; }
.p2p-card .card-body { padding:.75rem; display:flex; flex-direction:column; gap:.25rem; }
.p2p-card .card-title { font-size:1rem; font-weight:600; margin:0 0 .25rem; }
.p2p-card .card-tags { display:flex; flex-wrap:wrap; gap:.25rem; }
.p2p-card .tag { font-size:.75rem; border:1px solid #ddd; padding:.1rem .4rem; border-radius:999px; }
.p2p-card .card__status{font-size:.75rem;font-weight:600;border-radius:999px;padding:.25rem .6rem;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;text-align:center;display:inline-block;background:#F0E8D5;box-shadow:0 6px 16px rgba(0,0,0,.15);}
.p2p-card .card__status--match{background:#e8f6ef;color:#1c7c54;}
.p2p-card .card__status--pending{background:#F0E8D54e5;color:#9A031E;}
.p2p-card .card__status--rejected{background:#f6e9e9;color:#9A031E !important;}
.p2p-card.card--matched{border-color:#1c7c54;box-shadow:0 0 0 2px rgba(28,124,84,.12);}
.p2p-card.card--pending{opacity:0.9;}
.p2p-card.card--rejected{opacity:0.65;}
.p2p-disabled{opacity:.55;pointer-events:none !important;}
.p2p-card .card-meta, .p2p-card .card-locs, .p2p-card .card-user { font-size:.9rem; color:#444; }
.p2p-loading, .p2p-empty { padding:1rem; text-align:center; color:#666; }
/* Opacité pour les cartes non retenues */
.p2p-explore--rends .p2p-card:has(.card__status--rejected),
.p2p-explore--rends .p2p-card .card-link:has(.card__status--rejected) {
  opacity: 0.75 !important;
}

#p2p-explore-rends.is-busy { opacity:.7; pointer-events:none; }

/* Respecte l'attribut hidden */
.p2p-explore--rends .p2p-explore-filters[hidden]{
  display: none !important;
}

/* Carte entièrement cliquable, pas d’overlay gênant */
.p2p-card { position: relative; }
.p2p-card .card-link { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; width: 100%; cursor: pointer; }

/* ----- Modal profil ----- */
.p2p-modal[hidden]{ display:none !important; }
.p2p-modal.is-open{ display:block; }

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

.p2p-modal .p2p-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
}

.p2p-modal .p2p-modal-dialog {
  position: absolute; inset: 5%;
  background: #F0E8D5; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex; flex-direction: column; overflow: hidden;
}

.p2p-modal .p2p-modal-close {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: #000; color:#F0E8D5;
  width: 32px; height: 32px; border-radius: 999px;
  font-size: 18px; line-height: 32px; cursor: pointer;
  opacity: .9;
}

.p2p-modal .p2p-modal-frame {
  width: 100%; height: 100%;
  border: 0; margin: 0; padding: 0;
}

/* ====== Card redesign (inspiré de ta démo) ====== */

.p2p-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.p2p-card.card {
  --main-color: #414141;
  --submain-color: #414141;
  --bg-color: #fff;
  width: 100%;
  max-width: 320px;
  height: 100%;
  align-items: center;
  border-radius: 20px;
  border: 1px solid #9A031E;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
  
.p2p-card::before {
  background: transparent !important;
}

.p2p-card .card-link { display: flex; flex-direction: column; align-items: center; height:100%; color: inherit; text-decoration: none; }

.card__img {
  height: 160px; width: 100%;
}
.card__img svg {
  height: 100%; width: 100%; display: block;
  border-radius: 20px 20px 0 0;
}

/* avatar */
.card__avatar {
  position: absolute;
  top: calc(110px);
  width: 90px; height:90px;
  border-radius: 999px;
  display:flex; 
  box-shadow: 0 6px 18px rgba(16,24,40,.14);
  overflow: hidden;
}
.card__avatar-img {
  width: 100%; height: 100%; object-fit: cover;
}
.card__avatar-fallback {
  width: 100%; height: 100%;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 36px; letter-spacing: .5px;
  color: #F0E8D5; background: linear-gradient(135deg, #fc726e, #ffae7a);
}

/* titres / sous-titres */
.card__title {
  margin-top: 60px;
  font-weight: 600;
  font-size: 15px;
  color: var(--main-color);
  text-align: center;
  padding: 0 14px;
}
.card__subtitle {
  margin-top: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--main-color);
  text-align: center;
  padding: 0 14px;
}
.card__loc {
  margin-top: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #9A031E;
  text-align: center;
  padding: 0 14px;
}

/* badges */
.card__wrapper {
  margin-top: 12px; padding: 0 14px; margin-bottom: 24px;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.card__badge {
  font-size: 12px; font-weight: 600;
  border: 1px solid #414141; color: #414141;
  padding: .2rem .5rem; border-radius: 999px;
  background: #fff;
}

/* interaction */
.p2p-card.card:hover { box-shadow: 0 6px 24px rgba(16,24,40,.12); transform: translateY(-1px); transition: .2s ease; }

			  /* --- Modal loader overlay --- */
.p2p-modal { position: fixed; inset: 0; z-index: 9999; }
.p2p-modal[hidden] { display: none !important; }
.p2p-modal.is-open { display: block; }
.p2p-modal .p2p-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.4);
}
.p2p-modal .p2p-modal-dialog{
  position:absolute; left:50%; top:50%;
padding: 0px !important;
  transform:translate(-50%,-50%);
  width:min(90vw); height:min(800px, 80vh);
  background:#F0E8D5; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.p2p-modal .p2p-modal-close{
  position:absolute; right:8px; top:6px; z-index:2;
  border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer;
}
			  
.p2p-modal .p2p-modal-close:hover, .p2p-modal .p2p-modal-close:active{
  position:absolute; right:8px; top:6px; z-index:2;
  border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer; color: #F0E8D5;
}
			  
.p2p-modal .p2p-modal-frame{
  width:100%; height:100%; border:0; display:block;
}

/* Overlay centré sur la frame */
.p2p-modal .p2p-modal-loader{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.8));
  z-index:1; /* au-dessus de l'iframe */
}
			  
.p2p-name, .p2p-vcard__msg, .p2p-wanted {
  color: #F0E8D5 !important;
}

/* ===== Loader (uiverse Shoh2008) ===== */
.loader {
  width: 64px;
  height: 64px;
  position: relative;
  background: #FFF;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.loader:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  transform: rotate(45deg) translate(30%, 40%);
  background: #ff9371;
  box-shadow: 32px -34px 0 5px #ff3d00;
  animation: slide 2s infinite ease-in-out alternate;
}
.loader:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff3d00;
  transform-origin: 35px 145px;
  animation: rotate 2s infinite ease-in-out;
}
@keyframes slide {
  0%,100% { bottom:-35px }
  25%,75% { bottom:-2px }
  20%,80% { bottom: 2px }
}
@keyframes rotate {
  0% { transform: rotate(-15deg) }
  25%,75% { transform: rotate(0deg) }
  100% { transform: rotate(25deg) }
}

			  /* ===================== */
/*  OVERRIDES DASHBOARD  */
/* ===================== */

/* On renforce la grille dans le dashboard */
.p2p-dashboard-root .p2p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* On s’assure que la card garde sa gueule dans le dashboard */
.p2p-dashboard-root .p2p-card.card {
  width: 100%;
  max-width: 320px;
  height: 100%;
  border-radius: 20px;
  border: 1px solid #9A031E;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* Images de la card dans le dashboard : on écrase le reset Elementor */
.p2p-dashboard-root .p2p-card .card-media img {
  width: 100%;
  height: 100% !important; /* Elementor force height:auto, on reprend la main ici */
  object-fit: cover;
}

/* Avatar du dashboard : blindé au cas où */
.p2p-dashboard-root .card__avatar {
  border-radius: 999px;
  overflow: hidden;
}

/* Si besoin, tu peux aussi renforcer les hover uniquement dans le dashboard */
.p2p-dashboard-root .p2p-card.card:hover {
  box-shadow: 0 6px 24px rgba(16,24,40,.12);
  transform: translateY(-1px);
  transition: .2s ease;
}

.profile-picture-container .avatar img {
  border-radius: 999px !important;
}