/* =============================================================================
   Club Membership Manager — Frontend Styles
   No framework dependency — vanilla CSS only.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Custom Properties
   ----------------------------------------------------------------------------- */
:root {
	--cmm-primary:       #1a6db5;
	--cmm-primary-dark:  #145899;
	--cmm-success:       #1a7f3c;
	--cmm-success-bg:    #eaf7ee;
	--cmm-warning:       #7d5a00;
	--cmm-warning-bg:    #fef9e7;
	--cmm-danger:        #b01e1e;
	--cmm-danger-bg:     #fdf0f0;
	--cmm-info:          #1a5f8a;
	--cmm-info-bg:       #e8f4fc;
	--cmm-border:        #d0d5dd;
	--cmm-bg:            #f8f9fa;
	--cmm-white:         #ffffff;
	--cmm-text:          #1d2327;
	--cmm-text-muted:    #6c757d;
	--cmm-radius:        6px;
	--cmm-shadow:        0 2px 8px rgba(0, 0, 0, .08);
	--cmm-shadow-md:     0 4px 16px rgba(0, 0, 0, .12);
	--cmm-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

/* -----------------------------------------------------------------------------
   Base wrapper — scoped so we don't bleed into the theme
   ----------------------------------------------------------------------------- */
.cmm-form-wrap,
.cmm-dashboard {
	font-family: var(--cmm-font);
	color: var(--cmm-text);
	font-size: 15px;
	line-height: 1.6;
	box-sizing: border-box;
}

.cmm-form-wrap *,
.cmm-dashboard * {
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Alerts
   ----------------------------------------------------------------------------- */
.cmm-alert {
	padding: 14px 18px;
	border-radius: var(--cmm-radius);
	margin-bottom: 20px;
	font-size: 14px;
	border: 1px solid transparent;
}
.cmm-alert--success {
	background: var(--cmm-success-bg);
	border-color: #b2dfcc;
	color: var(--cmm-success);
}
.cmm-alert--warning {
	background: var(--cmm-warning-bg);
	border-color: #f5d97a;
	color: var(--cmm-warning);
}
.cmm-alert--danger,
.cmm-alert--error {
	background: var(--cmm-danger-bg);
	border-color: #f5b7b7;
	color: var(--cmm-danger);
}
.cmm-alert--info {
	background: var(--cmm-info-bg);
	border-color: #a8d4ee;
	color: var(--cmm-info);
}
.cmm-alert p:last-child { margin: 0; }

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.cmm-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--cmm-radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .15s, border-color .15s, color .15s;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}
.cmm-btn--primary {
	background: var(--cmm-primary);
	color: var(--cmm-white);
	border-color: var(--cmm-primary);
}
.cmm-btn--primary:hover {
	background: var(--cmm-primary-dark);
	border-color: var(--cmm-primary-dark);
	color: var(--cmm-white);
}
.cmm-btn--secondary {
	background: var(--cmm-white);
	color: var(--cmm-primary);
	border-color: var(--cmm-primary);
}
.cmm-btn--secondary:hover {
	background: var(--cmm-info-bg);
}
.cmm-btn--sm {
	padding: 5px 12px;
	font-size: 12px;
}
.cmm-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Registration form
   ----------------------------------------------------------------------------- */
.cmm-form-wrap {
	max-width: 680px;
	margin: 0 auto;
}

.cmm-form {
	background: var(--cmm-white);
	border: 1px solid var(--cmm-border);
	border-radius: var(--cmm-radius);
	box-shadow: var(--cmm-shadow);
}

.cmm-form__title {
	background: var(--cmm-primary);
	color: var(--cmm-white);
	margin: 0;
	padding: 20px 28px;
	font-size: 20px;
	font-weight: 700;
	border-radius: var(--cmm-radius) var(--cmm-radius) 0 0;
}

.cmm-form__section {
	padding: 24px 28px;
	border-bottom: 1px solid var(--cmm-border);
}
.cmm-form__section:last-of-type { border-bottom: none; }

.cmm-form__section h3 {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--cmm-text-muted);
}

.cmm-form__row { margin-bottom: 16px; }
.cmm-form__row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 540px) {
	.cmm-form__row--half { grid-template-columns: 1fr; }
}

.cmm-form__field { display: flex; flex-direction: column; }

.cmm-form__field label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--cmm-text);
}

.cmm-required { color: var(--cmm-danger); margin-left: 2px; }

.cmm-form__field input,
.cmm-form__field select,
.cmm-form__field textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--cmm-border);
	border-radius: 5px;
	font-size: 14px;
	font-family: var(--cmm-font);
	color: var(--cmm-text);
	transition: border-color .15s;
	background: var(--cmm-white);
}
.cmm-form__field input:focus,
.cmm-form__field select:focus,
.cmm-form__field textarea:focus {
	border-color: var(--cmm-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 109, 181, .12);
}
.cmm-form__field input[type="file"] {
	padding: 6px;
	border-style: dashed;
}
.cmm-form__field input:disabled {
	background: var(--cmm-bg);
	color: var(--cmm-text-muted);
	cursor: not-allowed;
}

.cmm-hint {
	font-size: 12px;
	color: var(--cmm-text-muted);
	margin: 4px 0 0;
}

.cmm-form__section--terms { background: var(--cmm-bg); }

.cmm-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}
.cmm-checkbox-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	cursor: pointer;
}

.cmm-form__actions {
	padding: 20px 28px;
	background: var(--cmm-bg);
	border-top: 1px solid var(--cmm-border);
	border-radius: 0 0 var(--cmm-radius) var(--cmm-radius);
}

/* Fee preview box */
.cmm-fee-preview {
	background: var(--cmm-info-bg);
	border: 1px solid #a8d4ee;
	border-radius: var(--cmm-radius);
	padding: 12px 16px;
	margin-top: 12px;
}
.cmm-fee-table {
	width: 100%;
	font-size: 13px;
}
.cmm-fee-table td { padding: 3px 0; }
.cmm-fee-table td:last-child { text-align: right; font-weight: 700; }

/* -----------------------------------------------------------------------------
   Member Dashboard
   ----------------------------------------------------------------------------- */
.cmm-dashboard { max-width: 920px; margin: 0 auto; }

/* Status banner */
.cmm-dashboard__banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 20px 24px;
	background: var(--cmm-white);
	border: 1px solid var(--cmm-border);
	border-radius: var(--cmm-radius);
	box-shadow: var(--cmm-shadow);
	margin-bottom: 20px;
}
.cmm-dashboard__banner-left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.cmm-dashboard__photo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--cmm-border);
	flex-shrink: 0;
}
.cmm-dashboard__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e8e8e8;
}
.cmm-dashboard__photo--placeholder .dashicons {
	font-size: 32px;
	color: #aaa;
}
.cmm-dashboard__name {
	margin: 0 0 3px;
	font-size: 20px;
	font-weight: 700;
}
.cmm-dashboard__meta {
	margin: 0;
	font-size: 13px;
	color: var(--cmm-text-muted);
}

/* Status color accents */
.cmm-status-active    { border-left: 4px solid #00a32a; }
.cmm-status-pending   { border-left: 4px solid #dba617; }
.cmm-status-approved  { border-left: 4px solid #2271b1; }
.cmm-status-suspended { border-left: 4px solid #d63638; }
.cmm-status-expired   { border-left: 4px solid #aaa; }
.cmm-status-rejected  { border-left: 4px solid #555; }

/* Badges */
.cmm-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.cmm-badge--active,    .cmm-badge--completed, .cmm-badge--paid    { background: #d7f0e0; color: #006e28; }
.cmm-badge--pending,   .cmm-badge--due                            { background: #fef3cd; color: #7d5a00; }
.cmm-badge--suspended, .cmm-badge--overdue,   .cmm-badge--failed  { background: #fde3e3; color: #a60000; }
.cmm-badge--approved,  .cmm-badge--upcoming                       { background: #d0e8f5; color: #1d609c; }
.cmm-badge--expired,   .cmm-badge--waived,    .cmm-badge--cancelled { background: #f0f0f0; color: #555; }
.cmm-badge--rejected                                               { background: #e8e8e8; color: #333; }
.cmm-badge--unpaid                                                 { background: #fde3e3; color: #a60000; }
.cmm-badge--large { font-size: 13px; padding: 5px 14px; }

/* Dues list */
.cmm-dues-list { display: flex; flex-direction: column; gap: 10px; }
.cmm-due-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--cmm-radius);
	border: 1px solid var(--cmm-border);
}
.cmm-due-item--due     { border-left: 4px solid #dba617; background: var(--cmm-warning-bg); }
.cmm-due-item--overdue { border-left: 4px solid #d63638; background: var(--cmm-danger-bg); }
.cmm-due-item--expense { border-left: 4px solid #8c4b93; background: #f7eefa; }

.cmm-due-item__date {
	display: block;
	font-size: 12px;
	color: var(--cmm-text-muted);
	margin-top: 2px;
}

.cmm-payment-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Panel */
.cmm-panel {
	background: var(--cmm-white);
	border: 1px solid var(--cmm-border);
	border-radius: var(--cmm-radius);
	box-shadow: var(--cmm-shadow);
	margin-bottom: 20px;
	overflow: hidden;
}
.cmm-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--cmm-border);
	background: var(--cmm-bg);
}
.cmm-panel__header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

/* Tabs */
.cmm-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--cmm-border);
	margin-bottom: 0;
	background: var(--cmm-white);
	border-radius: var(--cmm-radius) var(--cmm-radius) 0 0;
	overflow: hidden;
	border: 1px solid var(--cmm-border);
	border-bottom: 2px solid var(--cmm-border);
}
.cmm-tab {
	padding: 12px 20px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--cmm-text-muted);
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color .15s, border-color .15s;
	font-family: var(--cmm-font);
}
.cmm-tab:hover { color: var(--cmm-primary); }
.cmm-tab--active {
	color: var(--cmm-primary);
	border-bottom-color: var(--cmm-primary);
}

.cmm-tab-content {
	background: var(--cmm-white);
	border: 1px solid var(--cmm-border);
	border-top: none;
	border-radius: 0 0 var(--cmm-radius) var(--cmm-radius);
	padding: 24px;
	margin-bottom: 20px;
}

/* Table */
.cmm-table-wrap { overflow-x: auto; }
.cmm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.cmm-table th {
	padding: 10px 14px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--cmm-text-muted);
	background: var(--cmm-bg);
	border-bottom: 1px solid var(--cmm-border);
}
.cmm-table td {
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}
.cmm-table tbody tr:hover { background: var(--cmm-bg); }
.cmm-table tbody tr:last-child td { border-bottom: none; }

/* Empty state */
.cmm-empty {
	text-align: center;
	color: var(--cmm-text-muted);
	padding: 30px 0;
	font-size: 14px;
}

/* Info line */
.cmm-info { font-size: 14px; color: var(--cmm-text-muted); }

/* -----------------------------------------------------------------------------
   Frontend modals
   ----------------------------------------------------------------------------- */
.cmm-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.cmm-modal__box {
	background: var(--cmm-white);
	border-radius: var(--cmm-radius);
	box-shadow: var(--cmm-shadow-md);
	padding: 28px;
	max-width: 480px;
	width: 100%;
	position: relative;
	z-index: 10000;
	max-height: 90vh;
	overflow-y: auto;
}
.cmm-modal__box h3 { margin: 0 0 16px; font-size: 17px; }
.cmm-modal__actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.cmm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 9998;
}

/* Offline payment instructions */
.cmm-offline-instructions {
	font-size: 13px;
	color: var(--cmm-text-muted);
	margin-bottom: 16px;
}

/* -----------------------------------------------------------------------------
   Profile form in dashboard tab
   ----------------------------------------------------------------------------- */
#cmm-tab-profile .cmm-form {
	border: none;
	box-shadow: none;
}
#cmm-tab-profile .cmm-form__title { display: none; }
#cmm-tab-profile .cmm-form__section {
	padding: 0 0 20px;
	border: none;
}
#cmm-tab-profile .cmm-form__actions {
	padding: 16px 0 0;
	background: none;
	border-top: 1px solid var(--cmm-border);
	border-radius: 0;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.cmm-dashboard__banner { flex-direction: column; align-items: flex-start; }
	.cmm-due-item          { flex-direction: column; align-items: flex-start; }
	.cmm-tabs              { overflow-x: auto; }
	.cmm-tab               { white-space: nowrap; }
	.cmm-modal__box        { padding: 20px; }
	.cmm-form__title       { font-size: 17px; padding: 16px 20px; }
	.cmm-form__section     { padding: 18px 20px; }
	.cmm-form__actions     { padding: 16px 20px; }
}