/* Force parent to be perfect circle and hide overflow for profile avatar */
.avatar-circle-parent {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: 0 8px 28px rgba(31,45,61,0.12);
	border: inherit;
}

/* Modern responsive theme for Hamdeli
	 - Gradient background for body
	 - Responsive typography using clamp()
	 - Polished cards, navbar and buttons
*/

:root{
	--primary: #6f42c1; /* deep purple */
	--primary-dark: #5a2fb3;
	--muted: #6c757d;
	--card-bg: #ffffff;
	--surface: rgba(255,255,255,0.6);
	--text: #111827;
	--glass: rgba(255,255,255,0.5);
}

/* Custom MTN Irancell fonts */
@font-face{
	font-family: 'MTNIrancell';
	src: url('font/MTNIrancell-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'MTNIrancell';
	src: url('font/MTNIrancell-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'MTNIrancell';
	src: url('font/MTNIrancell-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Logo in navbar */
.site-logo{
	height: 34px;
	width: auto;
	margin-inline-end: 10px;
	vertical-align: middle;
	display: inline-block;
}

@media (max-width: 576px){
	.site-logo{ height:50px; margin-inline-end:0px }
}

html, body { height: 100%; }

body{
	display: flex;
	flex-direction: column;
	font-family: 'MTNIrancell', Tahoma, Arial, sans-serif;
	margin: 0;
	padding: 0 0 28px 0;
	color: var(--text);
	-webkit-font-smoothing:antialiased;
	position: relative; /* needed for ::before overlay */
	min-height: 100vh;
	background: transparent !important; /* ensure pseudo-layer shows through */
	transition: color 0.3s ease;
}

/* Animated, vivid gradient overlay behind all content */
body::before{
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(120deg, #ffd6e0 0%, #fbc2eb 25%, #a6c1ff 50%, #bfe9ff 75%, #e6f7ff 100%);
	background-size: 200% 200%;
	filter: saturate(110%) contrast(100%);
}

@keyframes gradientShift {
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}

/* apply animation (subtle and smooth) */
body::before{
	animation: gradientShift 12s ease-in-out infinite;
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce){
	body::before{ animation: none; }
}

/* Make layout breathing room inside bootstrap container */
.container{ padding-left: 12px; padding-right: 12px; }

/* Stretch main content so footer sits at bottom when page is short */
.site-content { flex: 1 0 auto; }

/* Navbar styling: subtle glass effect */
.navbar{
	background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.48));
	border-radius: 10px;
	padding: 8px 12px;
	border: 1px solid rgba(255,255,255,0.5);
}
.navbar .navbar-brand{ font-weight:700; color:var(--primary); }
.navbar .btn{ margin-left:6px }

/* Make navbar wrap on small screens and keep actions usable */
.navbar .container{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:8px;
	
	position:relative;
}
.navbar .navbar-brand{ position:relative;  top:8px;  display:flex; align-items:center; gap:10px; z-index:2 }
.nav-actions{
	display:flex;
	gap:8px;
	align-items:center;
	flex-wrap:wrap;
}
/* On very small screens make action buttons stack and expand */
@media (max-width:576px){
	.nav-actions{ width:100%; justify-content:stretch; }
	.nav-actions > a{ flex:1 1 48%; }
	.nav-actions > div{ display:flex; gap:8px; flex:1 1 48%; justify-content:flex-end; }
	.nav-actions > div > a{ flex:1; }
}

/* Force overrides when Bootstrap utility classes were left in markup */
.navbar.bg-white, .navbar.navbar-white, nav.navbar.bg-white, nav.navbar.navbar-white {
	background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.48)) !important;
	border: 1px solid rgba(255,255,255,0.5) !important;
	box-shadow: none !important;
}

/* Card */
.card{
	/* glassmorphism */
	background: rgba(255,255,255,0.56);
	border: 1px solid rgba(255,255,255,0.48);
	
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 18px;
	box-shadow: 0 12px 36px rgba(16,24,40,0.06);
	transition: transform .18s ease, box-shadow .18s ease;
	will-change: transform;
	overflow: auto;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 22px 50px rgba(16,24,40,0.09); }

/* Responsive type scale */
h1, h2, h3, h4, h5 { margin:0 }
h1 { font-size: clamp(20px, 3.6vw, 34px); }
h2 { font-size: clamp(18px, 3.2vw, 28px); }
h3 { font-size: clamp(16px, 2.6vw, 22px); }

/* Avatar helpers */
.avatar{ width:96px; height:96px; border-radius:5px; object-fit:contain; object-position:center; background:#f6f7fb; border:4px solid rgba(255,255,255,0.8); box-shadow:0 10px 32px rgba(31,45,61,0.08); display:block }
.avatar-sm{ width:64px; height:64px }
.avatar-lg{ width:160px; height:160px; border:5px solid #fff }

/* Force circular display on profile images */
.profile-card img, .card img, img.avatar, img[src*="uploads/"]{ border-radius:5px !important; object-fit:contain !important; object-position:center !important; background:#f6f7fb !important }

/* Accent badges */
.accent-female{ background: linear-gradient(135deg,#ff9ac8,#ff6fb5); color:#fff }
.accent-male{ background: linear-gradient(135deg,#6ec1ff,#4a90e2); color:#fff }
.badge-gender{ display:inline-block; padding:6px 10px; border-radius:5px; font-size:13px ; margin-top: 5px;}

/* Promo card price badge */
.promo-price{
	display:inline-block;
	background: linear-gradient(90deg,#ffd6a5 0%, #ff9aa2 100%);
	color: #6b1d7a;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	box-shadow: 0 8px 24px rgba(111,66,193,0.10);
	white-space: nowrap;
}
@media (max-width: 576px){
	.promo-price{ font-size:0.95rem; padding:6px 10px }
}

.likes-stats{ display:flex; gap:12px; align-items:center; font-size:14px; color:var(--muted) }
.likes-stats .num{ font-weight:700; color: #111 }

/* Buttons */
.btn-request{
	/* colored glass button */
	background: linear-gradient(90deg, rgba(111,66,193,0.14), rgba(90,47,179,0.12));
	border: 1px solid rgba(111,66,193,0.18);
	color: var(--primary-dark);
	backdrop-filter: blur(6px) saturate(120%);
}
.btn-remove{ background:transparent; border:1px solid #ffc9d9; color:#d63384 }
.btn{ border-radius:10px; padding:8px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.25)); border:1px solid rgba(255,255,255,0.45); color:var(--text); backdrop-filter: blur(6px) saturate(110%); box-shadow:0 6px 18px rgba(16,24,40,0.06); }
.btn-primary, .btn-primary:focus{ background: linear-gradient(90deg,var(--primary),var(--primary-dark)); border-color: rgba(0,0,0,0.06); color:#fff }
.btn-primary:hover{ filter: brightness(0.98); transform: translateY(-1px) }

/* Profiles grid */
.profiles-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:18px }
.profile-card{ display:flex; flex-direction:column; align-items:center; padding:0px 0px; border-radius:5px }
.profile-card .avatar-container{ width: 80px; height:80px; border-radius:5px; overflow:visible; margin-bottom:12px }
.profile-card .profile-info{ text-align:center }
.profile-card .profile-info h5{ margin:8px 0; font-size:18px; font-weight:500; display:block; overflow:hidden; word-break:break-word; overflow-wrap:anywhere; /* allow long names to wrap without breaking layout */
	/* keep name to at most 2 lines and show ellipsis if still long */
	display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.profile-card .profile-info .meta{ font-size:14px; color:var(--muted); margin-bottom:8px }
/* Improved profile card visuals */
.profile-card .avatar-container { display:flex; align-items:center; justify-content:center; width:110px; height:110px; margin:0 auto 12px auto; position: relative; overflow: visible; }

/* Unread badge style (used in members/matches) */
.unread-badge{
	position: absolute;
	top: 8px;
	right: 10px;
	background: #ff4d6d;
	color: #fff;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	z-index: 5;
	display: none;
	pointer-events: none;
}
@media (max-width:576px){ .unread-badge{ top:6px; right:8px; padding:3px 6px; font-size:11px } }
.profile-card .avatar { width:110px; height:110px; border-radius:5px; object-fit:contain; object-position:center; background:#f6f7fb; border:4px solid rgba(255,255,255,0.85); box-shadow:0 12px 36px rgba(16,24,40,0.08); }
.profile-card .profile-info { text-align:center; padding:8px 6px }
.profile-card .profile-info h5 { margin-top:6px; margin-bottom:6px; font-size:18px }
.age-badge { display:inline-block; background: linear-gradient(90deg,#fff7ed,#fff1f6); color:var(--muted); padding:6px 10px; border-radius:10px; font-weight:400; margin-inline-end:8px; border:1px solid rgba(0,0,0,0.04); }
.profile-actions { display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
/* Allow buttons to share available space on small screens and avoid overflow */
.profile-actions .btn { min-width:unset; flex: 0 1 auto; }
@media (min-width: 768px){
	/* keep a comfortable minimum width on wider screens */
	.profile-actions .btn { min-width:120px; }
}
@media (max-width:576px){
	.profile-actions{ width:100%; gap:8px; }
	.profile-actions > *{ flex: 1 1 48%; }
	.profile-actions > *:not(.btn){ text-align:center }
}
.profile-card .profile-info p {
	/* Allow bio to expand up to a few lines then become scrollable so the layout doesn't break
	   - shows up to ~5 lines and enables vertical scrolling for longer content
	   - keeps text wrapping and touch-friendly scrolling on mobile */
	line-height: 1.35em;
	max-height: calc(1.35em * 5);
	overflow-y: auto;
	overflow-x: hidden;
	white-space: normal;
	word-break: break-word;
	padding-right: 6px; /* room for scrollbar */
	-webkit-overflow-scrolling: touch;
}

/* Custom, subtle scrollbar for the bio area */
.profile-card .profile-info p::-webkit-scrollbar { width: 8px; height: 8px; }
.profile-card .profile-info p::-webkit-scrollbar-track { background: transparent; }
.profile-card .profile-info p::-webkit-scrollbar-thumb { background: rgba(16,24,40,0.08); border-radius: 8px; }
.profile-card .profile-info p { scrollbar-width: thin; scrollbar-color: rgba(16,24,40,0.08) transparent; }

/* Hero card styling: decorative background and simplified content */
.card.hero{
	background: linear-gradient(135deg, #7b3fcf 0%, #5a2fb3 55%);
	color: #fff;
	padding: 0 0px;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	padding-bottom: 0px!important;
	box-shadow: 0 20px 50px rgba(31,45,61,0.12);
}
.card.hero .hero-content{ max-width: 720px }
.card.hero h1{ color: #fff; font-size: clamp(22px, 4vw, 38px); margin-bottom:6px }
.card.hero .lead{ color: rgba(255,255,255,0.95); font-size:1.05rem }

/* decorative shapes */
.card.hero::before, .card.hero::after{
	content: "";
	position: absolute;
	pointer-events: none;
}
.card.hero::before{
	right: -80px; top: -40px; width:320px; height:320px;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 28%), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.03), transparent 36%);
	transform: rotate(18deg);
}
.card.hero::after{
	left: -120px; bottom: -50px; width:260px; height:260px;
	background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.04), transparent 40%);
	transform: rotate(-12deg);
}

@media (max-width:768px){
	.card.hero{ padding: 28px 18px }
	.card.hero::before, .card.hero::after{ display:none }
}
/* Ensure flex children can shrink: prevents long words from forcing parent width */
.profile-card .profile-info, .profiles-grid .profile-card, .card.d-flex > div {
	min-width: 0;
}

/* More tolerant wrapping for usernames and any long single-word strings */
.profile-card .profile-info h5, .card .small-muted, .card .form-control-plaintext, .profile-card .profile-info strong {
	overflow-wrap: anywhere; /* allow long strings to break */
	word-break: break-word;
}

/* Incoming request compact cards: ensure content wraps within fixed-width cards */
.card.p-2.d-flex { box-sizing: border-box; }
.card.p-2.d-flex .small-muted, .card.p-2.d-flex strong { display:block; min-width:0; }

@media (max-width: 992px){
	.profiles-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 576px){
	.profiles-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.profile-card .avatar-container{ width:110px; height:110px }
	.navbar{ padding:6px }
}

/* Mobile-specific fixes: ensure avatars/badges are rounded-square (5px), long text wraps and bio is scrollable/touch-friendly */
@media (max-width: 576px) {
	.profile-card { box-sizing: border-box; min-width: 0; padding: 10px; }
	.profiles-grid .profile-card { min-width: 0; }

	/* Force rounded-square avatars and thumbnails */
	.avatar, .profile-card .avatar, .profile-card .avatar-container, .msg-avatar, .like-avatar, .admin-user-avatar {
		border-radius: 5px !important;
		overflow: hidden;
	}

	/* Force gender badge to be rounded (fixes inconsistent rendering) */
	.badge-gender { border-radius: 5px !important; }

	/* Ensure title/name wraps and doesn't overflow card */
	.profile-card .profile-info h5 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		
		word-break: break-word;
		min-width: 0;
	}

	/* Bio area: allow more visible lines and make sure touch-scroll works on phones */
	.profile-card .profile-info p {
		max-height: calc(1.35em * 6);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		overscroll-behavior: contain;
		padding-right: 6px;
	}

	/* Slightly smaller scrollbar on small devices */
	.profile-card .profile-info p::-webkit-scrollbar { width: 6px; }
	.profile-card .profile-info p::-webkit-scrollbar-thumb { background: rgba(16,24,40,0.08); border-radius: 6px; }
}

/* Small utilities */
.muted{ color:var(--muted) }
.text-primary{ color:var(--primary) }

/* Ensure buttons and forms are usable on small screens */
input, button, select, textarea{ font-family: inherit }

/* End of theme */

/* Stronger button overrides to ensure glassy appearance over Bootstrap defaults */
.btn, .btn-primary, button.btn {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    color: inherit !important;
}
.btn:not(.btn-primary) {
    background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.25)) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    color: var(--text) !important;
    backdrop-filter: blur(6px) saturate(110%);
}
.btn-primary {
    background: linear-gradient(90deg,var(--primary),var(--primary-dark)) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    color: #fff !important;
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .card, .btn, .navbar{ background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.04) !important }
}

/* Telegram support card in footer */
.support-card { display:inline-block; }
.support-card a { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); box-shadow:0 6px 18px rgba(16,24,40,0.06); transition:transform .12s ease,box-shadow .12s ease; text-decoration:none; color:inherit }
.support-card a:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(16,24,40,0.08) }
.support-card .telegram-icon { width:28px !important; height:28px !important; max-width:28px !important; max-height:28px !important; display:block; object-fit:contain; border-radius:6px; }
.support-text { font-size:0.95rem; color:var(--muted); margin:0 }
.support-username { direction:ltr; text-align:left; display:inline-block; margin-left:8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; color:var(--primary-dark); font-weight:600 }

@media (max-width:576px){
	.support-card a{ padding:6px 8px; gap:8px }
	.support-username{ font-size:0.95rem }
}

/* Floating heart animation for chat */
.floating-heart {
	position: fixed;
	z-index: 9999;
	width: 44px; height: 44px; pointer-events: none; display: inline-block;
	transform-origin: center bottom;
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.floating-heart .heart-shape{ width:100%; height:100%; display:block; color:#ff4d6d; filter: drop-shadow(0 8px 22px rgba(255,77,109,0.14)); }

@keyframes heartFloatUp {
	0% {
		transform: translate3d(0,0,0) scale(0.88) rotate(-6deg);
		opacity: 1;
	}
	25% {
		transform: translate3d(0,-28px,0) scale(1.08) rotate(2deg);
		opacity: 1;
	}
	60% {
		transform: translate3d(0,-82px,0) scale(0.95) rotate(-2deg);
		opacity: 0.85;
	}
	100% {
		transform: translate3d(0,-160px,0) scale(0.62) rotate(-4deg);
		opacity: 0;
	}
}
.heart-animate { animation: heartFloatUp 1.6s cubic-bezier(.16,.84,.22,1) forwards; }

/* positioning helpers when animating from left/right sides */
.floating-heart.from-me { right: 18px; bottom: 110px; }
.floating-heart.from-other { left: 18px; bottom: 110px; }

/* pink outline button variant for kiss */
.btn-outline-pink{
	background: linear-gradient(90deg, rgba(255,143,179,0.08), rgba(255,143,179,0.04));
	border: 1px solid rgba(255,143,179,0.16);
	color: #d63384;
}

/* send button: small square icon */
.btn-send { width:44px; height:44px; padding:8px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px }
.btn-send svg { display:block }

/* Chat message avatar + bubble styles */
.msg-row { display:flex; align-items:flex-end; gap:8px; }
.msg-row.me { flex-direction:row-reverse; }
.msg-avatar { width:36px; height:36px; border-radius:5px; object-fit:contain; object-position:center; background:#f6f7fb; border:2px solid rgba(255,255,255,0.6); box-shadow:0 6px 18px rgba(16,24,40,0.06); }
.msg-bubble { max-width:78%; padding:8px 12px; border-radius:12px; background: rgba(255,255,255,0.72); box-shadow:0 8px 20px rgba(16,24,40,0.04); color:var(--text); }
.msg-bubble .msg-from { font-size:12px; color:var(--muted); margin-bottom:4px }
.msg-bubble .msg-text { font-size:15px; line-height:1.35 }
.msg-bubble.me-bubble { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); color:#fff }
.msg-bubble.other-bubble { background: rgba(255,255,255,0.84); color:var(--text) }

/* Slightly taller card hover spacing for chat visual comfort */
.card.p-3 { padding:20px }

/* Centering wrapper for auth pages (login / register) */
.auth-page{
	min-height: calc(100vh - 140px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}
.auth-card{ width: 100%; max-width: 520px; border-radius:14px }

@media (max-width: 576px){
	.auth-page{ padding:20px 12px; min-height: calc(100vh - 120px); }
	.auth-card{ padding:18px }
}

/* History page styling */
.section-main-title { font-size: 1.25rem; margin-bottom: 12px; font-weight:700; color:var(--primary-dark) }
.history-card { border-radius:12px; }
.section-title { font-size:1rem; margin-bottom:8px; color:var(--primary); font-weight:700 }
.history-list { display:block; }
.history-item { padding:10px; border-radius:8px; transition: background .12s ease; display:flex; align-items:center }
.history-item + .history-item { margin-top:8px }
.history-item:hover { background: rgba(16,24,40,0.03) }
.like-avatar { width:64px; height:64px; border-radius:5px; object-fit:contain; object-position:center; background:#f6f7fb; border:3px solid rgba(255,255,255,0.85); box-shadow:0 8px 26px rgba(16,24,40,0.06) }
.like-avatar-wrap { width:64px; height:64px; flex:0 0 64px }
.history-section .card { background: rgba(255,255,255,0.6); }
.history-card .small-muted { color:var(--muted); }

@media (max-width: 768px){
	.history-item { flex-direction: row; }
}

/* Admin thumbnails */
.admin-thumb { width: 140px; height: 120px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,0.06); }
@media (max-width:576px){ .admin-thumb { width: 100px; height: 80px; } }

/* Compact admin user cards */
.admin-user-card { padding:12px; border-radius:12px; display:flex; gap:12px; align-items:center; }
.admin-user-avatar { width:56px !important; height:56px !important; border-radius:8px !important; object-fit:cover; flex:0 0 56px; box-shadow:0 8px 24px rgba(16,24,40,0.06); }
.admin-user-meta { flex:1; min-width:0 }
.admin-user-meta h6 { margin:0; font-size:1rem; font-weight:600 }
.admin-user-meta .meta-line { font-size:0.85rem; color:var(--muted); }
.admin-user-actions { display:flex; gap:6px; align-items:center }
.admin-badges { display:flex; gap:6px; margin-top:6px }

@media (max-width:768px){
	.admin-user-card { padding:10px; }
	.admin-user-avatar { width:48px !important; height:48px !important; flex:0 0 48px }
}
.card-body{
	padding-left: 0  !important;
	padding-right: 0  !important;
}