/* ==========================================================================
   Membership Dashboard — by Cloudswired Technologies
   ========================================================================== */

/* ---------- CSS variables ---------- */
:root {
	--mbd-sidebar-bg:    #1a2e5a;
	--mbd-sidebar-width: 240px;
	--mbd-accent:        #1a2e5a;
	--mbd-accent-hover:  #142248;
	--mbd-home-btn-bg:   #243b7a;
	--mbd-home-btn-hover:#1a2e5a;
	--mbd-nav-active-bg: rgba(255,255,255,.12);
	--mbd-text-primary:  #1a2e5a;
	--mbd-text-muted:    #6b7280;
	--mbd-border:        #e5e8ec;
	--mbd-card-radius:   8px;
	--mbd-progress-h:    8px;
	--mbd-progress-fill: #3b5fc0;
	--mbd-badge-active:  #15803d;
	--mbd-badge-active-bg: #dcfce7;
	--mbd-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset defaults that themes inject ---------- */
.mbd-account-page .woocommerce,
.mbd-account-page .woocommerce-page {
	max-width: none !important;
	padding:   0 !important;
	margin:    0 !important;
}
.mbd-account-page .woocommerce > .col2-set,
.mbd-account-page .woocommerce-MyAccount-navigation,
.mbd-account-page .woocommerce-MyAccount-content {
	float:  none !important;
	width:  100% !important;
	margin: 0 !important;
}

/* ==========================================================================
   Layout wrapper
   ========================================================================== */
.mbd-wrapper {
	display:    flex;
	min-height: 100vh;
	font-family: var(--mbd-font);
	background: #f3f4f8;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.mbd-sidebar {
	width:      var(--mbd-sidebar-width);
	min-width:  var(--mbd-sidebar-width);
	background: var(--mbd-sidebar-bg);
	color:      #fff;
	display:    flex;
	flex-direction: column;
	position:   sticky;
	top:        0;
	height:     100vh;
	overflow-y: auto;
	z-index:    100;
	flex-shrink: 0;
}

.mbd-sidebar-inner {
	display:        flex;
	flex-direction: column;
	padding:        24px 0 32px;
	height:         100%;
}

/* Logo */
.mbd-logo-wrap {
	padding:       0 20px 20px;
	border-bottom: 1px solid rgba(255,255,255,.12);
	margin-bottom: 16px;
	text-align:    center;
}
.mbd-logo {
	max-width:  160px;
	max-height: 70px;
	width:      auto;
	height:     auto;
}
.mbd-site-name {
	font-size:   1rem;
	font-weight: 700;
	color:       #fff;
	letter-spacing: 0.5px;
}

/* Back to Home button */
.mbd-btn-home {
	display:         flex;
	align-items:     center;
	gap:             8px;
	background:      var(--mbd-home-btn-bg);
	color:           #fff;
	text-decoration: none;
	font-size:       .85rem;
	font-weight:     600;
	padding:         10px 20px;
	margin:          0 16px 20px;
	border-radius:   6px;
	transition:      background .2s;
}
.mbd-btn-home:hover,
.mbd-btn-home:focus {
	background:      var(--mbd-home-btn-hover);
	color:           #fff;
	text-decoration: none;
}

/* Navigation */
.mbd-nav {
	display:        flex;
	flex-direction: column;
	flex:           1;
}
.mbd-nav-link {
	display:         flex;
	align-items:     center;
	gap:             12px;
	color:           rgba(255,255,255,.8);
	text-decoration: none;
	padding:         11px 20px;
	font-size:       .88rem;
	font-weight:     500;
	transition:      background .15s, color .15s;
	border-left:     3px solid transparent;
}
.mbd-nav-link:hover,
.mbd-nav-link:focus {
	background:  var(--mbd-nav-active-bg);
	color:       #fff;
	text-decoration: none;
}
.mbd-nav-link.is-active {
	background:  var(--mbd-nav-active-bg);
	color:       #fff;
	border-left-color: #fff;
}
.mbd-nav-icon {
	flex-shrink: 0;
	opacity:     .85;
	line-height: 1;
}
.mbd-nav-link.is-active .mbd-nav-icon,
.mbd-nav-link:hover .mbd-nav-icon {
	opacity: 1;
}

/* ==========================================================================
   Main area
   ========================================================================== */
.mbd-main {
	flex:       1;
	min-width:  0;
	padding:    32px 28px 40px;
	position:   relative;
}

.mbd-page-heading {
	font-size:      1.35rem;
	font-weight:    700;
	color:          var(--mbd-text-primary);
	letter-spacing: 1px;
	margin:         0 0 24px;
	padding-bottom: 16px;
	border-bottom:  2px solid var(--mbd-border);
}

/* ==========================================================================
   Inner layout (content + right panel)
   ========================================================================== */
.mbd-layout {
	display:   flex;
	gap:       24px;
	align-items: flex-start;
}
.mbd-layout--page .mbd-content-col {
	flex: 1;
}
.mbd-layout--dashboard .mbd-content-col {
	flex: 1;
	min-width: 0;
}
.mbd-panel-col {
	width:       280px;
	min-width:   280px;
	flex-shrink: 0;
}

/* ==========================================================================
   Member Information Card (dashboard content)
   ========================================================================== */
.mbd-info-card {
	background:    #fff;
	border:        1px solid var(--mbd-border);
	border-radius: var(--mbd-card-radius);
	overflow:      hidden;
}
.mbd-info-card__head {
	padding:       20px 24px 16px;
	border-bottom: 1px solid var(--mbd-border);
}
.mbd-info-card__title {
	font-size:      .95rem;
	font-weight:    700;
	color:          var(--mbd-text-primary);
	letter-spacing: .8px;
	margin:         0 0 4px;
}
.mbd-info-card__sub {
	font-size: .8rem;
	color:     var(--mbd-text-muted);
	margin:    0;
}

/* Info grid */
.mbd-info-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   0;
}
.mbd-info-item {
	padding:       14px 24px;
	border-bottom: 1px solid var(--mbd-border);
}
.mbd-info-item:nth-child(odd):not(.mbd-info-item--full) {
	border-right: 1px solid var(--mbd-border);
}
.mbd-info-item--full {
	grid-column: 1 / -1;
}
.mbd-info-item__label {
	font-size:   .75rem;
	color:       var(--mbd-text-muted);
	margin-bottom: 4px;
}
.mbd-info-item__value {
	font-size:   .88rem;
	color:       var(--mbd-text-primary);
	font-weight: 500;
}
.mbd-empty {
	color: var(--mbd-text-muted);
}

.mbd-info-card__foot {
	padding:    18px 24px;
	text-align: right;
}

/* ==========================================================================
   Right membership panel blocks
   ========================================================================== */
.mbd-panel-block {
	background:    #fff;
	border:        1px solid var(--mbd-border);
	border-radius: var(--mbd-card-radius);
	padding:       18px 20px;
	margin-bottom: 16px;
}
.mbd-panel-block:last-child {
	margin-bottom: 0;
}
.mbd-panel-title {
	font-size:      .78rem;
	font-weight:    700;
	color:          var(--mbd-text-primary);
	letter-spacing: .8px;
	margin:         0 0 12px;
	padding-bottom: 10px;
	border-bottom:  1px solid var(--mbd-border);
}
.mbd-panel-row {
	font-size: .85rem;
	color:     var(--mbd-text-primary);
	margin:    0;
}
.mbd-member-id {
	color: var(--mbd-accent);
}

/* Subscription card inside panel */
.mbd-sub-card {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}
.mbd-sub-card__header {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             8px;
}
.mbd-sub-card__name {
	font-size:   .88rem;
	font-weight: 700;
	color:       var(--mbd-text-primary);
}
.mbd-sub-card__type {
	font-size: .75rem;
	color:     var(--mbd-text-muted);
}

/* Status badge */
.mbd-badge {
	display:       inline-block;
	font-size:     .72rem;
	font-weight:   600;
	padding:       3px 10px;
	border-radius: 20px;
	white-space:   nowrap;
}
.mbd-badge--active,
.mbd-badge--complimentary {
	background: var(--mbd-badge-active-bg);
	color:      var(--mbd-badge-active);
}
.mbd-badge--expired,
.mbd-badge--cancelled,
.mbd-badge--paused {
	background: #fee2e2;
	color:      #b91c1c;
}
.mbd-badge--pending,
.mbd-badge--free_trial {
	background: #fef3c7;
	color:      #92400e;
}
.mbd-badge--inactive {
	background: #f3f4f6;
	color:      #6b7280;
}

/* Progress bar */
.mbd-progress__track {
	background:    #e5e7eb;
	border-radius: 99px;
	height:        var(--mbd-progress-h);
	overflow:      hidden;
}
.mbd-progress__fill {
	background:    var(--mbd-progress-fill);
	height:        100%;
	border-radius: 99px;
	transition:    width .6s ease;
}
.mbd-progress__labels {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	font-size:       .72rem;
	color:           var(--mbd-text-muted);
	margin-top:      6px;
}
.mbd-progress__pct {
	font-weight: 600;
	color:       var(--mbd-progress-fill);
}

/* ==========================================================================
   Shared buttons
   ========================================================================== */
.mbd-btn {
	display:         inline-block;
	text-decoration: none;
	border:          none;
	cursor:          pointer;
	font-family:     var(--mbd-font);
	font-size:       .85rem;
	font-weight:     600;
	padding:         10px 22px;
	border-radius:   6px;
	transition:      background .2s, opacity .2s;
	line-height:     1.4;
}
.mbd-btn--primary {
	background: var(--mbd-accent);
	color:      #fff !important;
}
.mbd-btn--primary:hover,
.mbd-btn--primary:focus {
	background:      var(--mbd-accent-hover);
	color:           #fff !important;
	text-decoration: none;
}
.mbd-btn--full {
	display:    block;
	text-align: center;
	width:      100%;
}

/* ==========================================================================
   WooCommerce default content re-skin (for inner pages)
   ========================================================================== */
.mbd-content-col .woocommerce-MyAccount-content {
	background: transparent;
}
/* Orders table */
.mbd-content-col .woocommerce-orders-table,
.mbd-content-col table.shop_table {
	width:          100%;
	background:     #fff;
	border:         1px solid var(--mbd-border);
	border-radius:  var(--mbd-card-radius);
	border-collapse: separate;
	border-spacing: 0;
	font-size:      .88rem;
	overflow:       hidden;
}
.mbd-content-col table.shop_table th {
	background:  #f8f9fb;
	color:       var(--mbd-text-primary);
	font-weight: 700;
	font-size:   .78rem;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding:     12px 16px;
	border-bottom: 1px solid var(--mbd-border);
}
.mbd-content-col table.shop_table td {
	padding:       12px 16px;
	border-bottom: 1px solid var(--mbd-border);
	color:         var(--mbd-text-primary);
	vertical-align: middle;
}
.mbd-content-col table.shop_table tr:last-child td {
	border-bottom: none;
}
/* Form fields */
.mbd-content-col .woocommerce-form__label,
.mbd-content-col label {
	font-size:   .82rem;
	font-weight: 600;
	color:       var(--mbd-text-primary);
}
.mbd-content-col input[type="text"],
.mbd-content-col input[type="email"],
.mbd-content-col input[type="tel"],
.mbd-content-col input[type="password"],
.mbd-content-col select,
.mbd-content-col textarea {
	border:        1px solid var(--mbd-border);
	border-radius: 6px;
	padding:       9px 12px;
	font-size:     .88rem;
	width:         100%;
	box-sizing:    border-box;
	font-family:   var(--mbd-font);
	transition:    border-color .2s;
}
.mbd-content-col input:focus,
.mbd-content-col select:focus,
.mbd-content-col textarea:focus {
	border-color: var(--mbd-accent);
	outline:      none;
}
.mbd-content-col .button,
.mbd-content-col input[type="submit"],
.mbd-content-col button[type="submit"] {
	background:      var(--mbd-accent);
	color:           #fff;
	border:          none;
	border-radius:   6px;
	padding:         10px 24px;
	font-size:       .88rem;
	font-weight:     600;
	cursor:          pointer;
	font-family:     var(--mbd-font);
	transition:      background .2s;
	text-decoration: none;
}
.mbd-content-col .button:hover,
.mbd-content-col input[type="submit"]:hover,
.mbd-content-col button[type="submit"]:hover {
	background: var(--mbd-accent-hover);
	color:      #fff;
}
/* WooCommerce notices */
.mbd-content-col .woocommerce-message,
.mbd-content-col .woocommerce-info,
.mbd-content-col .woocommerce-error {
	border-radius: var(--mbd-card-radius);
	font-size:     .88rem;
}

/* ==========================================================================
   Mobile hamburger
   ========================================================================== */
.mbd-hamburger {
	display:    none;
	flex-direction: column;
	gap:        5px;
	background: none;
	border:     none;
	cursor:     pointer;
	padding:    8px;
	margin-bottom: 16px;
}
.mbd-hamburger span {
	display:       block;
	width:         22px;
	height:        2px;
	background:    var(--mbd-text-primary);
	border-radius: 2px;
	transition:    transform .2s, opacity .2s;
}
.mbd-overlay {
	display:  none;
	position: fixed;
	inset:    0;
	background: rgba(0,0,0,.45);
	z-index:  99;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.mbd-panel-col {
		width:     240px;
		min-width: 240px;
	}
}

@media (max-width: 900px) {
	.mbd-layout--dashboard {
		flex-direction: column;
	}
	.mbd-panel-col {
		width:     100%;
		min-width: 0;
	}
}

@media (max-width: 720px) {
	/* Sidebar becomes off-canvas on mobile */
	.mbd-sidebar {
		position:   fixed;
		left:       0;
		top:        0;
		height:     100vh;
		transform:  translateX(-100%);
		transition: transform .25s ease;
		z-index:    200;
	}
	.mbd-sidebar.is-open {
		transform: translateX(0);
	}
	.mbd-overlay.is-visible {
		display: block;
	}
	.mbd-hamburger {
		display: flex;
	}
	.mbd-main {
		padding: 20px 16px 32px;
	}
	.mbd-info-grid {
		grid-template-columns: 1fr;
	}
	.mbd-info-item--full,
	.mbd-info-item:nth-child(odd):not(.mbd-info-item--full) {
		border-right: none;
	}
	.mbd-info-item {
		border-bottom: 1px solid var(--mbd-border);
	}
}

@media (max-width: 480px) {
	.mbd-page-heading {
		font-size: 1.1rem;
	}
}