/* ==========================================================
   BuddySocial v9.67
   FRIENDS BLOCK BACKGROUND STYLE ONLY

   Alleen de vriendenpagina:
   - directe block-omlijsting
   - zoek/toolbalk
   - vriendenkaarten
   - evt. verzoekenblok

   Doel:
   de blocks dezelfde site-achtergrondstijl geven,
   maar met voldoende lichte overlay voor leesbaarheid.
   ========================================================== */

body[data-page="friends"] .hyves-friends-page .friends-page-box{
  background:
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),
    var(--site-bg-image, linear-gradient(180deg,#f6fbff,#eef6fb)) center top / cover no-repeat !important;
  border:1px solid #b8cfdf !important;
  box-shadow:0 2px 8px rgba(33,69,96,.08) !important;
}

body[data-page="friends"] .hyves-friends-page .friends-page-box > .retro-pad{
  background:transparent !important;
}

/* Bovenbalk op de vriendenpagina */
body[data-page="friends"] .hyves-friends-page .classic-page-tools,
body[data-page="friends"] .hyves-friends-page .friends-toolbar{
  background:
    linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),
    var(--site-bg-image, linear-gradient(180deg,#f8fcff,#eef6fb)) center top / cover no-repeat !important;
  border:1px solid #bfd3e1 !important;
  box-shadow:0 1px 3px rgba(24,56,82,.05) !important;
  border-radius:3px !important;
}

body[data-page="friends"] .hyves-friends-page .friends-toolbar{
  padding:9px 10px 12px !important;
  border-bottom:1px solid #dce7ef !important;
}

body[data-page="friends"] .hyves-friends-page .friends-search input{
  background:rgba(255,255,255,.96) !important;
  border-color:#9db5c7 !important;
}

/* Hoofdkaarten / deze blocks uit je screenshot */
body[data-page="friends"] .hyves-friends-page .friend-directory-card{
  background:
    linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)),
    var(--site-bg-image, linear-gradient(180deg,#ffffff,#f2f8fc)) center center / cover no-repeat !important;
  border:1px solid #c4d6e3 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.06) !important;
  position:relative;
  overflow:hidden;
}

/* heel subtiel extra sfeerlaag */
body[data-page="friends"] .hyves-friends-page .friend-directory-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(79,154,219,.08) 0 44px, transparent 45px),
    radial-gradient(circle at 82% 24%, rgba(255,173,60,.08) 0 42px, transparent 43px);
  z-index:0;
}

body[data-page="friends"] .hyves-friends-page .friend-directory-card > *{
  position:relative;
  z-index:1;
}

/* Actiebalk onderin het blok */
body[data-page="friends"] .hyves-friends-page .friend-directory-actions{
  border-top:1px solid rgba(191,210,224,.95) !important;
  background:rgba(255,255,255,.45) !important;
  padding-top:8px !important;
}

/* Vriendverzoekenblok in dezelfde stijl */
body[data-page="friends"] .hyves-friends-page .friend-requests-panel{
  background:
    linear-gradient(rgba(255,251,242,.90),rgba(255,251,242,.90)),
    var(--site-bg-image, linear-gradient(180deg,#fffaf0,#fff3db)) center center / cover no-repeat !important;
  border:1px solid #e8cd93 !important;
}

body[data-page="friends"] .hyves-friends-page .friend-request-card{
  background:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    var(--site-bg-image, linear-gradient(180deg,#fff,#f8fbfd)) center center / cover no-repeat !important;
}

/* Mobiel netjes hetzelfde */
@media(max-width:700px){
  body[data-page="friends"] .hyves-friends-page .friend-directory-card,
  body[data-page="friends"] .hyves-friends-page .classic-page-tools,
  body[data-page="friends"] .hyves-friends-page .friends-toolbar{
    background-size:cover !important;
  }
}