/* Prietenii unui membru pe stilul nou (page=friends): templates/prieteni_pagina.ihtml, desktop (.pr-d) + mobil (.pr-m).
   Aceeasi familie ca Mesajele (images/inbox_conv.css): accent #c2185b, text #231a1f / #3a2e33, gri #6c5e65, linii #ece3e7, fond #f7f3f5.
   Pe mobil images/ios/css/test.css stilizeaza h1/input/a sub #content: regulile de acolo sunt dublate cu #content. */

.pr { font-size: 14px; line-height: 1.4; color: #231a1f; text-align: left; }
.pr * { -webkit-box-sizing: border-box; box-sizing: border-box; }
.pr a { text-decoration: none; }
.pr a:focus-visible, .pr input:focus-visible { outline: 2px solid #c2185b; outline-offset: 2px; }
.pr-d { display: table; table-layout: fixed; width: 100%; padding: 4px 0 8px; }   /* pagina e asezata in tabele: nu lateste coloana */
/* mobil: fondul paginii e gradient roz; pagina are fondul ei */
.pr-m { margin: 8px 6px 12px; padding: 14px 10px 14px; border-radius: 18px; background: #f7f3f5; }

/* ---- capul: poza proprietarului, "Prietenii lui X", cati sunt, "Vezi profilul" ---- */
.pr-cap { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 2px 0 16px; }
.pr a.pr-cap-poza { -webkit-flex: 0 0 52px; flex: 0 0 52px; width: 52px; height: 52px; margin-right: 14px; border-radius: 50%; overflow: hidden; background: #ece3e7; }
.pr-cap-poza img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-cap-tx { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.pr .pr-h1, #content .pr .pr-h1 { margin: 0; padding: 0; border: 0; background: none; color: #231a1f; font-size: 26px; font-weight: 800; line-height: 1.2; text-align: left; text-shadow: none; word-wrap: break-word; }
.pr .pr-h1 a, #content .pr .pr-h1 a { color: #231a1f; }
.pr .pr-h1 a:hover { color: #c2185b; }
.pr-sub { margin-top: 2px; color: #6c5e65; font-size: 14px; font-weight: 600; }
.pr a.pr-profil { -webkit-flex: 0 0 auto; flex: 0 0 auto; height: 40px; margin-left: 12px; padding: 0 18px; border: 1px solid #e3d7dd; border-radius: 20px; background: #fff; color: #3a2e33;
	font-size: 14px; font-weight: bold; line-height: 38px; white-space: nowrap; }
.pr a.pr-profil:hover { border-color: #c2185b; color: #c2185b; }
.pr-m .pr-cap { margin-bottom: 14px; }
.pr-m a.pr-cap-poza { -webkit-flex-basis: 44px; flex-basis: 44px; width: 44px; height: 44px; margin-right: 12px; }
.pr-d .pr-h1 { font-size: 22px; }
.pr-m .pr-h1, #content .pr-m .pr-h1 { font-size: 21px; }
.pr-m .pr-sub { font-size: 13px; }

/* ---- banda pentru vizitatori ---- */
.pr-banda { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 0 0 14px; padding: 14px 16px;
	border: 1px solid #f1c9da; border-radius: 14px; background: #fdf6f9; }
.pr-banda p { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; margin: 0 16px 0 0; color: #3a2e33; line-height: 1.45; }
.pr a.pr-btn, #content .pr a.pr-btn { display: inline-block; height: 44px; padding: 0 22px; border-radius: 22px; background: #c2185b; color: #fff; font-size: 15px; font-weight: 800; line-height: 44px; text-align: center; white-space: nowrap; }
.pr a.pr-btn:hover { background: #a3134b; }
.pr a.pr-btn:active { opacity: .8; }
.pr-m .pr-banda { display: block; }
.pr-m .pr-banda p { margin: 0 0 10px; }
.pr-m .pr-banda a.pr-btn, #content .pr-m .pr-banda a.pr-btn { display: block; }

/* ---- cautarea dupa nume ---- */
.pr-cauta { position: relative; margin: 0 0 12px; }
.pr-cauta svg { position: absolute; left: 15px; top: 14px; fill: none; stroke: #6c5e65; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.pr .pr-cauta input[type=search], #content .pr .pr-cauta input[type=search] { display: block; width: 100%; max-width: none; height: 44px; margin: 0; padding: 0 16px 0 42px;
	border: 1px solid #e3d7dd; border-radius: 22px; background: #fff; color: #231a1f; font-family: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; box-shadow: none; }
.pr-m .pr-cauta input[type=search], #content .pr-m .pr-cauta input[type=search] { font-size: 16px; }   /* 16px: iOS nu mai mareste pagina la focus */
.pr .pr-cauta input[type=search]:focus { border-color: #c2185b; outline: 0; box-shadow: 0 0 0 3px rgba(194,24,91,.12); }

/* ---- filtrele: desktop pe mai multe randuri; mobil un rand derulabil ---- */
.pr-chips { margin: 0 0 14px; font-size: 0; }
.pr-m .pr-chips { margin: 0 -10px 12px; padding: 0 10px 2px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pr a.pr-chip, #content .pr a.pr-chip { display: inline-block; height: 36px; margin: 0 8px 8px 0; padding: 0 14px; border: 1px solid #e3d7dd; border-radius: 18px; background: #fff; color: #3a2e33;
	font-size: 13.5px; font-weight: bold; line-height: 34px; white-space: nowrap; vertical-align: top; }
.pr-d a.pr-chip { margin-right: 5px; padding: 0 10px; font-size: 13px; }
.pr-d a.pr-chip span { margin-left: 4px; }
.pr-m a.pr-chip, #content .pr-m a.pr-chip { margin-bottom: 0; }
.pr a.pr-chip span { margin-left: 5px; color: #6c5e65; font-weight: 600; }
.pr a.pr-chip:hover { border-color: #c2185b; color: #c2185b; }
.pr a.pr-chip-on, .pr a.pr-chip-on:hover, #content .pr a.pr-chip-on { background: #231a1f; border-color: #231a1f; color: #fff; }
.pr a.pr-chip-on span { color: rgba(255,255,255,.75); }

/* ---- lista: o cutie alba cu randuri despartite de linii ---- */
.pr-cutie { border: 1px solid #ece3e7; border-radius: 16px; background: #fff; overflow: hidden; }
.pr-m .pr-cutie { margin: 0 -4px; border-radius: 14px; }
.pr-rand { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 12px 16px; border-top: 1px solid #ece3e7; }
.pr-rand:first-child { border-top: 0; }
.pr-d .pr-rand:hover { background: #fcf9fa; }
.pr a.pr-link, #content .pr a.pr-link { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
	-webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; color: #231a1f; }
.pr-av { position: relative; -webkit-flex: 0 0 56px; flex: 0 0 56px; width: 56px; height: 56px; margin-right: 14px; }
.pr-av img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #ece3e7; }
.pr-av i { position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #2bb24c; }
.pr-tx { display: block; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.pr-l1, .pr-l2 { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pr-l1 { color: #6c5e65; font-size: 14.5px; }
.pr-l1 b { color: #231a1f; font-size: 16px; font-weight: 800; }
.pr-ins { display: inline-block; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: #1d9bf0; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; vertical-align: 1px; }
.pr-l2 { margin-top: 1px; color: #3a2e33; }
.pr-l2-cauta { color: #6c5e65; }
.pr-sem { display: block; height: 22px; margin-top: 5px; overflow: hidden; }
.pr-pil { display: inline-block; height: 22px; margin-right: 6px; padding: 0 9px; border-radius: 11px; background: #f7f3f5; color: #3a2e33; font-size: 12px; font-weight: bold; line-height: 22px; white-space: nowrap; vertical-align: top; }
.pr-pil-comun { background: #fbe9f1; color: #c2185b; }
.pr-pil-ras { background: #e9f5ea; color: #2e7d32; }
.pr a.pr-ac, #content .pr a.pr-ac { -webkit-flex: 0 0 auto; flex: 0 0 auto; height: 38px; margin-left: 14px; padding: 0 16px; border: 1px solid #e3d7dd; border-radius: 19px; background: #fff; color: #c2185b;
	font-size: 14px; font-weight: 800; line-height: 36px; white-space: nowrap; }
.pr a.pr-ac:hover { border-color: #c2185b; background: #fdf6f9; }
.pr a.pr-ac:active { opacity: .75; }
.pr-m .pr-rand { padding: 12px 10px 12px 12px; }
.pr-m .pr-av, .pr-m .pr-av img { -webkit-flex-basis: 52px; flex-basis: 52px; width: 52px; height: 52px; }
.pr-m .pr-av { margin-right: 12px; }
.pr-m .pr-l1 { font-size: 14px; }
.pr-m .pr-l1 b { font-size: 15.5px; }
.pr-m a.pr-ac, #content .pr-m a.pr-ac { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
	-webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; width: 44px; height: 44px; margin-left: 10px; padding: 0; border-radius: 50%; line-height: 0; }
.pr-m a.pr-ac svg { display: block; fill: none; stroke: #c2185b; stroke-width: 2; stroke-linejoin: round; }

/* ---- nimic de aratat ---- */
.pr-fara { padding: 22px 16px; color: #6c5e65; text-align: center; line-height: 1.6; }
.pr .pr-fara a, #content .pr .pr-fara a { color: #c2185b; font-weight: 800; }
.pr-gol { padding: 30px 20px 26px; border: 1px solid #ece3e7; border-radius: 16px; background: #fff; text-align: center; }
.pr-gol svg { display: block; margin: 0 auto 8px; fill: none; stroke: #c9b6bf; stroke-width: 1.6; }
.pr-gol p { margin: 0 0 4px; color: #231a1f; font-size: 16px; font-weight: 800; }
.pr-gol small { display: block; max-width: 34em; margin: 0 auto 16px; color: #6c5e65; font-size: 13.5px; line-height: 1.45; }
.pr-gol a.pr-btn, #content .pr-gol a.pr-btn { display: block; max-width: 300px; margin: 0 auto; }

/* ---- paginarea ---- */
.pr-pag { margin: 16px 0 2px; text-align: center; font-size: 0; }
.pr-pag a, .pr-pag span { display: inline-block; min-width: 40px; height: 40px; margin: 0 3px; padding: 0 8px; border: 1px solid #e3d7dd; border-radius: 20px; background: #fff; color: #3a2e33;
	font-size: 14px; font-weight: bold; line-height: 38px; text-align: center; }
.pr-pag a:hover { border-color: #c2185b; color: #c2185b; }
.pr-pag span.pr-pag-acum { background: #c2185b; border-color: #c2185b; color: #fff; }
.pr-pag span.pr-pag-gol { border-color: transparent; background: none; }
.pr-pag-m { display: -webkit-box; display: -webkit-flex; display: flex; margin: 14px 0 0; }
.pr .pr-pag-m a, #content .pr .pr-pag-m a { display: block; -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; height: 48px; border: 1px solid #e3d7dd; border-radius: 24px; background: #fff; color: #3a2e33;
	font-size: 15px; font-weight: 800; line-height: 46px; text-align: center; }
.pr .pr-pag-m a + a { margin-left: 10px; }
.pr-pag-m-nr { margin-top: 8px; color: #6c5e65; font-size: 13px; font-weight: 600; text-align: center; }