/* mk-ui.css — Couche de finition PARTAGÉE des pages membres de Maktoub.
   Harmonise les cartes/listes/états vides déjà présents (vc/vis-row/cr-card/in-card/pc/mg-card…)
   vers le rendu chaleureux de l'accueil. 100% ADDITIF : n'altère aucune mise en page.
   Chargé globalement par header.php. */

/* ── Cartes profil / lignes de liste : survol premium (élévation + ombre douce) ── */
.vc,.vis-row,.cr-card,.pc,.in-card,.mg-card{
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
a.vc:hover, a.vis-row:hover, a.cr-card:hover, a.pc:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,81,50,.10);
  border-color:var(--emerald,#0f5132);
}
/* .mg-card est enveloppé dans un <a> (boîte de réception) */
a:hover > .mg-card{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,81,50,.10);
  border-color:var(--emerald,#0f5132);
}
.in-card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.07); }

/* Avatars : l'image couvre proprement le cercle */
.vc-av,.vis-av,.in-av,.cr-photo{ overflow:hidden; background-size:cover; background-position:center; }

/* En-têtes de section : petit filet doré (rappel de marque) */
.cr-sec,.in-sec{ position:relative; padding-left:.7rem; }
.cr-sec::before,.in-sec::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  width:3px; border-radius:2px; background:var(--gold,#c79a3a);
}

/* États vides : carte chaleureuse (pointillés) plutôt qu'un simple texte gris */
.cr-empty,.in-empty,.vis-empty,.mg-empty{
  background:var(--bg-card);
  border:1px dashed var(--border);
  border-radius:16px;
}

/* ══════════ Identité « Maktoub — Rencontre avec intention » (GLOBAL, pages membres) ══════════
   Habillage islamique / marocain SUBTIL. 100% additif, réutilise les variables existantes.
   Le fond .mk-deco n'est rendu que sur les pages « app » (header.php → body.mk-has-deco). */
body{ --mk-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23C9A646' stroke-width='1.1'%3E%3Crect x='27' y='27' width='36' height='36'/%3E%3Crect x='27' y='27' width='36' height='36' transform='rotate(45 45 45)'/%3E%3C/g%3E%3C/svg%3E"); }

/* Fond décoratif : ivoire chaud + zellige (étoile 8 branches) + halos verts/dorés.
   z-index:-1 (comme .mk-aurora) : la couleur de fond du body est propagée au canvas,
   le motif s'affiche par-dessus, le contenu reste au-dessus. */
.mk-deco{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 42% at 14% 8%, rgba(201,168,76,.09), transparent 60%),
             radial-gradient(55% 45% at 92% 26%, rgba(15,81,50,.08), transparent 60%),
             linear-gradient(180deg,#f8f5ee,#eee7da); }
.mk-deco::before{ content:""; position:absolute; inset:0; background-image:var(--mk-star); background-size:96px 96px; opacity:.45; }
[data-theme="dark"] .mk-deco{ background:radial-gradient(60% 42% at 14% 8%, rgba(201,168,76,.09), transparent 60%),
             radial-gradient(55% 45% at 92% 26%, rgba(22,107,79,.16), transparent 60%),
             linear-gradient(180deg,#0b1f18,#0e241b); }
[data-theme="dark"] .mk-deco::before{ opacity:.13; }

/* Bottom nav : verre + halo vert-doré sur l'onglet actif */
.mk-tabbar{ box-shadow:0 -6px 24px rgba(11,79,58,.12) !important; border-top:1px solid rgba(201,168,76,.28) !important; }
.mk-tab.active .ic{ filter:drop-shadow(0 2px 7px rgba(201,168,76,.5)); }
.mk-tab.active{ position:relative; }
.mk-tab.active::before{ content:""; position:absolute; top:.15rem; left:50%; transform:translateX(-50%); width:34px; height:34px;
  border-radius:50%; background:radial-gradient(circle, rgba(201,168,76,.20), transparent 70%); z-index:-1; }

/* Story « + » : anneau doré élégant (là où la barre stories existe) */
.st-ring.add{ background:linear-gradient(135deg,var(--gold,#c9a646),#e2c76b) !important; }
.st-ring.add .st-av{ background:var(--bg-card); color:var(--gold,#c9a646); }

/* Titres de section : fin trait doré centré (harmonise les pages membres) */
.mk-has-deco .section-title::after{ content:""; display:block; width:54px; height:3px; margin:.6rem auto 0; border-radius:3px;
  background:linear-gradient(90deg,var(--gold,#c9a646),var(--emerald,#0f5132)); }

/* Cartes : légère ombre chaude pour ressortir sur le fond zellige (pages membres) */
.mk-has-deco .card,
.mk-has-deco .mc-card,
.mk-has-deco .vc,
.mk-has-deco .vis-row,
.mk-has-deco .cr-card,
.mk-has-deco .in-card,
.mk-has-deco .hm-card,
.mk-has-deco .pc,
.mk-has-deco .mt-wrap .pc{ box-shadow:0 4px 16px rgba(11,79,58,.06); }

/* ── Accent « moment » : vendredi (Jumu'ah) — chaleur dorée subtile, 100% visuel ── */
.mk-friday .mk-deco{ background:
  radial-gradient(60% 42% at 14% 8%, rgba(201,168,76,.16), transparent 60%),
  radial-gradient(55% 45% at 92% 26%, rgba(201,168,76,.12), transparent 62%),
  linear-gradient(180deg,#f9f4e6,#efe6d2); }
.mk-friday .mk-deco::before{ opacity:.6; }
[data-theme="dark"] .mk-friday .mk-deco{ background:
  radial-gradient(60% 42% at 14% 8%, rgba(201,168,76,.16), transparent 60%),
  radial-gradient(55% 45% at 92% 26%, rgba(201,168,76,.10), transparent 62%),
  linear-gradient(180deg,#0d2018,#12281d); }
.mk-friday .mk-tabbar{ border-top-color:rgba(201,168,76,.5) !important; }

/* ── Accents saisonniers Ramadan / Aïd (activés par dates dans header.php ; 100% visuels) ── */
.mk-ramadan .mk-deco{ background:
  radial-gradient(60% 42% at 14% 8%, rgba(201,168,76,.18), transparent 60%),
  radial-gradient(55% 45% at 88% 24%, rgba(201,168,76,.14), transparent 62%),
  linear-gradient(180deg,#f7f1e1,#ece2cc); }
.mk-ramadan .mk-deco::before{ opacity:.55; }
[data-theme="dark"] .mk-ramadan .mk-deco{ background:
  radial-gradient(60% 42% at 14% 8%, rgba(201,168,76,.20), transparent 60%),
  radial-gradient(55% 45% at 88% 24%, rgba(201,168,76,.12), transparent 62%),
  linear-gradient(180deg,#0a1720,#0e2233); }
.mk-ramadan .mk-tabbar{ border-top-color:rgba(201,168,76,.55) !important; }
.mk-aid .mk-deco{ background:
  radial-gradient(60% 42% at 14% 8%, rgba(201,168,76,.22), transparent 60%),
  radial-gradient(55% 45% at 90% 26%, rgba(226,199,107,.18), transparent 62%),
  linear-gradient(180deg,#faf3df,#f1e7cf); }
.mk-aid .mk-deco::before{ opacity:.6; }
.mk-aid .mk-tabbar{ border-top-color:var(--gold,#c9a646) !important; }