/* ============================================================
   Ecohomes My Account — Page-level styles
   Sidebar styles live in eh-sidebar.css (registered as a dep).
   ============================================================ */

/* `:root` duplicated here so plugins that enqueue only eh-myaccount get the vars */
:root {
	--eh-green:       #2ECC71;
	--eh-green-dark:  #27AE60;
	--eh-blue:        #3498DB;
	--eh-orange:      #F39C12;
	--eh-red:         #E74C3C;
	--eh-gray-100:    #F8F9FA;
	--eh-gray-200:    #E9ECEF;
	--eh-gray-500:    #6C757D;
	--eh-gray-800:    #343A40;
	--eh-white:       #FFFFFF;
	--eh-sidebar-w:   240px;
	--eh-radius:      8px;
	--eh-shadow:      0 2px 8px rgba(0,0,0,.08);
}

/* ── Layout ── */
.woocommerce-MyAccount-content {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

/* Consistent account-page width + sidebar/content column split across ALL
   My Account tabs (matches the Status Pengiriman page). Scoped to
   .woocommerce-MyAccount-content — present inside .dashboard-wrap on every logged-in
   account endpoint, so it covers all tabs but never the login/register screens. */
.woocommerce-account .container:has(.woocommerce-MyAccount-content) {
	width: 100% !important;
	max-width: 1360px !important;
}
.woocommerce-account .dashboard-wrap:has(.woocommerce-MyAccount-content) > [class*="col-"]:first-child {
	flex: 0 0 19%;
	max-width: 19%;
}
.woocommerce-account .dashboard-wrap:has(.woocommerce-MyAccount-content) > [class*="col-"]:last-child {
	flex: 0 0 81%;
	max-width: 81%;
}

/* ── Stat Cards (used by dashboard, projects, etc.) ── */
.eh-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.eh-stat-card {
	background: var(--eh-white);
	border-radius: var(--eh-radius);
	box-shadow: var(--eh-shadow);
	padding: 16px;
	text-align: center;
}

.eh-stat-card .eh-stat-value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--eh-green-dark);
	display: block;
}

.eh-stat-card .eh-stat-label {
	font-size: .75rem;
	color: var(--eh-gray-500);
	margin-top: 4px;
	display: block;
}

/* ── Status Badges ── */
.eh-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: .75rem;
	font-weight: 600;
}

.eh-badge-green  { background: #d4edda; color: #155724; }
.eh-badge-yellow { background: #fff3cd; color: #856404; }
.eh-badge-red    { background: #f8d7da; color: #721c24; }
.eh-badge-blue   { background: #d1ecf1; color: #0c5460; }
.eh-badge-gray   { background: var(--eh-gray-200); color: var(--eh-gray-800); }

/* ── Page Header ── */
.eh-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.eh-page-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--eh-gray-800);
}

/* ── Access Gate ── */
.eh-access-gate {
	background: var(--eh-white);
	border-radius: var(--eh-radius);
	box-shadow: var(--eh-shadow);
	padding: 48px 32px;
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
}

.eh-gate-icon {
	font-size: 48px;
	color: var(--eh-gray-500);
	margin-bottom: 16px;
	display: block;
}

.eh-gate-title {
	font-size: 1.1rem;
	margin-bottom: 12px;
	color: var(--eh-gray-800);
}

.eh-gate-desc {
	color: var(--eh-gray-500);
	font-size: .875rem;
	line-height: 1.6;
	margin-bottom: 24px;
}

.eh-gate-cta {
	background: var(--eh-green);
	color: var(--eh-white) !important;
	border: none;
	border-radius: 6px;
	padding: 10px 24px;
	font-weight: 600;
}

.eh-gate-cta:hover { background: var(--eh-green-dark); }

/* ── Responsive ── */
@media (max-width: 768px) {
	/* Stack the nav/content columns on small screens. */
	.woocommerce-account .dashboard-wrap:has(.woocommerce-MyAccount-content) > [class*="col-"] {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.woocommerce-MyAccount-content {
		flex-direction: column;
	}
}

/* ── Privacy policy checkbox validation ─────────────────────── */
.eh-policy-error {
	display: block;
	color: #c0392b;
	font-size: .84rem;
	font-weight: 500;
	padding: 6px 0;
}

.eh-checkbox-error label {
	color: #c0392b;
}

.eh-checkbox-error input[type="checkbox"] {
	outline: 2px solid #c0392b;
	outline-offset: 2px;
}