/**
 * Credbio Public Styles
 *
 * File location: credbio-core/public/css/credbio-public.css
 *
 * Shared base styles loaded on all Credbio public pages.
 * Page-specific styles are inlined in each template to keep
 * this file lean and focused on global resets and utilities only.
 *
 * Loaded by Public_Facing::enqueue_assets() on all Credbio pages.
 *
 * @package Credbio\Core
 * @since   1.0.0
 */

/* -------------------------------------------------------------------------
   Reset — scope to Credbio elements only, never bleed into theme
   ------------------------------------------------------------------------- */

.cb-register-wrap *,
.cb-login-wrap *,
.cb-profile-wrap *,
.cb-dash-wrap *,
.cb-modal-overlay * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   CSS variables — single source of truth for the design system
   ------------------------------------------------------------------------- */

:root {
	--cb-green:      #10b981;
	--cb-green-dk:   #059669;
	--cb-green-lt:   rgba(16, 185, 129, 0.12);
	--cb-dark:       #0a0a0a;
	--cb-surface:    #111111;
	--cb-card:       #161616;
	--cb-border:     #222222;
	--cb-muted:      #666666;
	--cb-text:       #f0f0f0;
	--cb-text-dim:   #aaaaaa;
	--cb-error:      #f87171;
	--cb-error-bg:   rgba(239, 68, 68, 0.1);
	--cb-error-bdr:  rgba(239, 68, 68, 0.3);
	--cb-warning:    #ca8a04;
	--cb-warning-bg: rgba(234, 179, 8, 0.12);
	--cb-radius-sm:  6px;
	--cb-radius:     12px;
	--cb-radius-lg:  16px;
	--cb-font:       'DM Sans', sans-serif;
}

/* -------------------------------------------------------------------------
   Typography — DM Sans loaded via Google Fonts in templates
   ------------------------------------------------------------------------- */

.cb-register-wrap,
.cb-login-wrap,
.cb-profile-wrap,
.cb-dash-wrap,
.cb-modal-overlay {
	font-family: var(--cb-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
   Utility classes
   ------------------------------------------------------------------------- */

/* Visibility */
.cb-hidden  { display: none !important; }
.cb-visible { display: block !important; }

/* Text */
.cb-text-muted   { color: var(--cb-muted); }
.cb-text-green   { color: var(--cb-green); }
.cb-text-error   { color: var(--cb-error); }
.cb-text-center  { text-align: center; }
.cb-text-sm      { font-size: 13px; }
.cb-text-xs      { font-size: 12px; }
.cb-font-medium  { font-weight: 500; }
.cb-font-bold    { font-weight: 700; }

/* Spacing */
.cb-mt-8  { margin-top: 8px; }
.cb-mt-16 { margin-top: 16px; }
.cb-mt-24 { margin-top: 24px; }
.cb-mb-8  { margin-bottom: 8px; }
.cb-mb-16 { margin-bottom: 16px; }

/* Flex */
.cb-flex         { display: flex; }
.cb-flex-center  { display: flex; align-items: center; }
.cb-flex-between { display: flex; align-items: center; justify-content: space-between; }
.cb-gap-8        { gap: 8px; }
.cb-gap-12       { gap: 12px; }
.cb-gap-16       { gap: 16px; }

/* -------------------------------------------------------------------------
   Shared component styles
   ------------------------------------------------------------------------- */

/* Buttons */
.cb-btn-primary {
	display: inline-block;
	background: var(--cb-green);
	color: #fff;
	border: none;
	border-radius: var(--cb-radius-sm);
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--cb-font);
	text-decoration: none;
	transition: background 0.2s;
	line-height: 1;
}

.cb-btn-primary:hover    { background: var(--cb-green-dk); }
.cb-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.cb-btn-ghost {
	display: inline-block;
	background: transparent;
	color: var(--cb-muted);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-sm);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	font-family: var(--cb-font);
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
	line-height: 1;
}

.cb-btn-ghost:hover { color: var(--cb-text); border-color: #444; }

/* Badges */
.cb-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
}

.cb-badge-green   { background: var(--cb-green-lt); color: var(--cb-green); }
.cb-badge-warning { background: var(--cb-warning-bg); color: var(--cb-warning); }
.cb-badge-error   { background: var(--cb-error-bg); color: var(--cb-error); }
.cb-badge-muted   { background: rgba(255,255,255,0.06); color: var(--cb-muted); }

/* Alert boxes */
.cb-alert {
	border-radius: var(--cb-radius-sm);
	padding: 11px 14px;
	font-size: 13px;
	margin-bottom: 16px;
}

.cb-alert-error {
	background: var(--cb-error-bg);
	border: 1px solid var(--cb-error-bdr);
	color: var(--cb-error);
}

.cb-alert-success {
	background: var(--cb-green-lt);
	border: 1px solid rgba(16, 185, 129, 0.3);
	color: var(--cb-green);
}

/* Loading skeleton */
.cb-skeleton {
	background: var(--cb-border);
	border-radius: var(--cb-radius-sm);
	animation: cb-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes cb-skeleton-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.35; }
}

/* Divider */
.cb-divider {
	border: none;
	border-top: 1px solid var(--cb-border);
	margin: 20px 0;
}

/* -------------------------------------------------------------------------
   Responsive helpers
   ------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.cb-hide-mobile { display: none !important; }
}

@media ( min-width: 601px ) {
	.cb-hide-desktop { display: none !important; }
}

/* -------------------------------------------------------------------------
   Scrollbar styling — Credbio containers only
   ------------------------------------------------------------------------- */

.cb-modal,
.cb-dash-body {
	scrollbar-width: thin;
	scrollbar-color: var(--cb-border) transparent;
}

.cb-modal::-webkit-scrollbar,
.cb-dash-body::-webkit-scrollbar {
	width: 5px;
}

.cb-modal::-webkit-scrollbar-thumb,
.cb-dash-body::-webkit-scrollbar-thumb {
	background: var(--cb-border);
	border-radius: 4px;
}