/* ============================================================================
   Modern.css — Look-and-feel overlay for fonefunmembers.com
   Loaded after FoneFunMembers.css to soften the dated 2010s styling without
   touching the existing markup. Safe to remove by reverting Theme.php.
   ========================================================================= */

/* ---- Typography ------------------------------------------------------- */
body, body p, body td, body div, body input, body button, body select, body textarea, body a {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body { color: #2c3e50; background: #f4f6f8; }
body p { line-height: 1.55; }
body h1, body h2, body h3, body h4, body h5 { font-weight: 600; letter-spacing: -0.01em; }

/* ---- Wrappers / spacing ---------------------------------------------- */
body div.Wrapper { max-width: 1200px; margin-left: auto; margin-right: auto; }
body div.Breadcrumbs { font-size: 12px; color: #6c7a89; }
body div.Breadcrumbs a { color: #4a90e2; text-decoration: none; }
body div.Breadcrumbs a:hover { text-decoration: underline; }

/* ---- Panels / cards --------------------------------------------------- */
body div.Panel,
body div.dash-section,
body div.Sidebar.Panel {
	background: #ffffff;
	border: 1px solid #e2e6ea;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	overflow: hidden;
}
body div.Panel h2,
body div.Sidebar.Panel h2 {
	background: #f8f9fb;
	border-bottom: 1px solid #e2e6ea;
	padding: 12px 16px;
	margin: 0;
	font-size: 14px;
	color: #2c3e50;
	letter-spacing: 0.3px;
}
body div.Panel-Inner { padding: 16px; }

/* ---- Folders list (Browse) ------------------------------------------- */
body ul.Folders > li,
body ul.Files > li {
	border-bottom: 1px solid #f0f2f4;
	padding: 4px 0;
}
body ul.Folders > li:last-child,
body ul.Files > li:last-child { border-bottom: none; }
body ul li a.FolderClosed,
body ul li a.FolderOpen,
body ul li a.Icon {
	color: #2c3e50;
	transition: color 0.15s ease;
}
body ul li a.FolderClosed:hover,
body ul li a.Icon:hover { color: #4a90e2; }

/* ---- Buttons --------------------------------------------------------- */
body input.Submit,
body input[type="submit"],
body input[type="button"],
body button {
	background: linear-gradient(135deg, #4a90e2 0%, #357ab8 100%);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 2px 4px rgba(74,144,226,0.18);
	letter-spacing: 0.2px;
}
body input.Submit:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(74,144,226,0.25);
}
body input.Submit:active,
body input[type="submit"]:active,
body input[type="button"]:active,
body button:active { transform: translateY(0); }

/* ---- Inputs ---------------------------------------------------------- */
body input[type="text"],
body input[type="password"],
body input[type="email"],
body textarea,
body select {
	border: 1px solid #d8dde2;
	border-radius: 5px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	box-sizing: border-box;
}
body input[type="text"]:focus,
body input[type="password"]:focus,
body input[type="email"]:focus,
body textarea:focus,
body select:focus {
	border-color: #4a90e2;
	box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
}

/* ---- Tables (admin dash etc.) ---------------------------------------- */
body table.dash-table th { background: #f8f9fb; color: #6c7a89; }
body table.dash-table tr:hover td { background: #f6faff; }

/* ---- Messages -------------------------------------------------------- */
body div.Message.Success,
body div.Message.Error {
	border-radius: 6px;
	padding: 10px 14px;
	border: 1px solid;
	margin-top: 0;
}
body div.Message.Success { background: #e8f5e9; border-color: #c5e1c8; color: #1b5e20; }
body div.Message.Error { background: #fdecea; border-color: #f6c5c1; color: #b3261e; }

/* ---- Footer / copyright ---------------------------------------------- */
body div.Wrapper:last-of-type { color: #95a3b3; font-size: 12px; }

/* ---- Account / login form -------------------------------------------- */
body div.Sidebar.Panel form input[type="text"],
body div.Sidebar.Panel form input[type="password"] { width: 100%; margin-bottom: 8px; }

/* ---- Mobile responsiveness ------------------------------------------- */
@media (max-width: 900px) {
	body div.Wrapper { padding: 0 12px; box-sizing: border-box; }
	body div.Left-Side, body div.Right-Side { float: none; width: 100% !important; }
	body div.Right-Side { margin-top: 16px; }
	body div.dash-stats { gap: 8px; }
	body div.dash-stat-card { min-width: 110px; padding: 12px; }
	body div.dash-stat-card .stat-number { font-size: 26px; }
}
@media (max-width: 600px) {
	body ul.NavMenu li a { padding: 8px 10px; font-size: 12px; }
	body div.Breadcrumbs { font-size: 11px; }
}

/* ---- Subtle polish for legacy chrome --------------------------------- */
body hr {
	border: none;
	border-top: 1px solid #e2e6ea;
	margin: 14px 0;
}
body a { transition: color 0.12s ease; }

/* ---- Navigation tabs (header) --------------------------------------- */
body div#Header ul li a {
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
	font-weight: 500;
	letter-spacing: 0.4px;
	border-radius: 6px 6px 0 0;
}
body div#Header ul li a:hover {
	background-color: #4a90e2 !important;
	color: #fff !important;
	transform: translateY(-1px);
}
body div#Header ul li.Selected a {
	background-color: #ffffff !important;
	color: #2c3e50 !important;
	text-shadow: none !important;
	box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}
body div#Header ul li.Free-Downloads a {
	background-color: #ffb01f !important;
	color: #1f2937 !important;
	text-shadow: none !important;
	font-weight: 600;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(255,176,31,0.25);
}
body div#Header ul li.Free-Downloads a:hover {
	background-color: #ffc04a !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(255,176,31,0.32);
}

/* ---- Stats bar ------------------------------------------------------- */
body ul.Stats {
	display: flex;
	gap: 18px;
	list-style: none;
	padding: 0;
	margin: 0;
}
body ul.Stats li {
	font-size: 12px;
	color: #6c7a89;
	padding: 4px 0;
}
body ul.Stats li strong {
	color: #2c3e50;
	font-weight: 600;
}

/* ---- Footer ---------------------------------------------------------- */
body div#Footer {
	margin-top: 36px;
	padding: 20px 0;
	border-top: 1px solid #e2e6ea;
	color: #6c7a89;
	font-size: 12px;
}
body div#Footer p { line-height: 1.6; }
body div#Footer a { color: #4a90e2; text-decoration: none; }
body div#Footer a:hover { text-decoration: underline; }
body div#Footer ul.Footer-Links {
	list-style: none;
	padding: 0;
	margin: 6px 0 0 0;
}
body div#Footer ul.Footer-Links li { display: inline; margin-right: 12px; }

/* ---- Sidebar account/login ------------------------------------------- */
body div.Sidebar.Panel { padding: 0; }
body div.Sidebar.Panel h2 {
	background: #f8f9fb;
	color: #2c3e50;
	font-size: 14px;
	padding: 12px 16px;
	margin: 0;
	border-bottom: 1px solid #e2e6ea;
}
body div.Sidebar.Panel form,
body div.Sidebar.Panel p,
body div.Sidebar.Panel ul,
body div.Sidebar.Panel hr { padding-left: 14px; padding-right: 14px; }
body div.Sidebar.Panel hr { padding: 0; }

/* End of Modern.css */