/* ==========================================================================
   Bulk Arab Perfume Account Dashboard — design tokens (section 9 of brief)
   ========================================================================== */
:root {
	--nad-bg: #F5F6F8;
	--nad-card: #FFFFFF;
	--nad-text: #202124;
	--nad-text-muted: #74777D;
	--nad-gold: #C8A45D;
	--nad-gold-dark: #B6924E;
	--nad-border: #E5E7EB;
	--nad-header-dark: #1A1B1E;
	--nad-radius: 10px;
	--nad-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);

	--nad-badge-onhold-bg: #F0EEEA;
	--nad-badge-onhold-text: #7A6E5A;
	--nad-badge-cancelled-bg: #FBE7E7;
	--nad-badge-cancelled-text: #C23A3A;
	--nad-badge-completed-bg: #E6F4EA;
	--nad-badge-completed-text: #2E8540;
	--nad-badge-processing-bg: #E7F0FB;
	--nad-badge-processing-text: #2F6FC1;
	--nad-badge-neutral-bg: #EEEEEE;
	--nad-badge-neutral-text: #5F6368;
}

/* ==========================================================================
   Layout isolation (v1.0.1)
   --------------------------------------------------------------------------
   The My Account page is rendered inside Elementor's own "My Account"
   widget (class e-my-account-tabs-vertical), which — like most themes —
   applies its OWN width/flex/color rules to the exact two elements we also
   style: .woocommerce-MyAccount-navigation and .woocommerce-MyAccount-content.
   That fight is what caused the layout to look right in the editor (narrow
   canvas, easy to miss) but break on the real page, and let theme colors
   leak in. The rules below give our wrapper a fixed width that does not
   depend on the editor/theme getting their own width settings right, and
   strip anything the theme/Elementor widget tries to impose on the shared
   classes before our grid runs.
   ========================================================================== */

/* 1) Don't let Elementor's own widget container clamp us below the
      Section/Container width set on the page. */
.elementor-widget-woocommerce-my-account .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
}

/* 2) Strip anything the theme or Elementor's widget styling puts on the two
      shared WooCommerce classes (width, float, flex-basis, background,
      borders, shadows, theme accent colors) before they reach our markup. */
.nad-account-wrapper .woocommerce-MyAccount-content,
.nad-account-wrapper .woocommerce-MyAccount-navigation {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* 3) The wrapper controls its own width/max-width directly, so it renders
      correctly even if an Elementor Section's width setting hasn't been
      regenerated on the live page yet. Adjust --nad-max-width below if the
      page's container width ever changes. */
.nad-account-wrapper {
	--nad-max-width: 1400px;
	width: 100% !important;
	max-width: var(--nad-max-width) !important;
	margin: 0 auto !important;
	background: var(--nad-bg) !important;
	padding: 24px !important;
	display: grid !important;
	grid-template-columns: 240px 1fr !important;
	gap: 24px !important;
	align-items: start !important;
	color: var(--nad-text) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
}
.nad-account-wrapper,
.nad-account-wrapper * {
	box-sizing: border-box !important;
}

@media (max-width: 1024px) {
	.nad-account-wrapper {
		grid-template-columns: 200px 1fr !important;
		gap: 16px !important;
		padding: 16px !important;
	}
}

@media (max-width: 768px) {
	.nad-account-wrapper {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Sidebar navigation
   ========================================================================== */
.nad-sidebar {
	background: transparent !important;
}
.nad-sidebar ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 8px 0 !important;
}
.nad-sidebar li {
	margin: 0 !important;
}
.nad-sidebar a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 11px 14px !important;
	color: var(--nad-text-muted) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	border-radius: 6px !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}
.nad-sidebar a:hover {
	background: #ECECEF !important;
	color: var(--nad-text) !important;
}
.nad-sidebar li.is-active a {
	color: var(--nad-text) !important;
	font-weight: 600 !important;
}
.nad-sidebar__icon {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	opacity: 0.7 !important;
}

@media (max-width: 768px) {
	.nad-sidebar ul {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 4px !important;
		padding: 12px 0 !important;
		border-bottom: 1px solid var(--nad-border) !important;
	}
	.nad-sidebar a {
		padding: 8px 10px !important;
		font-size: 13px !important;
	}
}

/* ==========================================================================
   Welcome header
   ========================================================================== */
.nad-welcome__title {
	font-size: 26px !important;
	font-weight: 700 !important;
	margin: 0 0 10px !important;
	color: var(--nad-text) !important;
}
.nad-welcome__accent {
	width: 46px !important;
	height: 3px !important;
	background: var(--nad-gold) !important;
	border-radius: 2px !important;
	margin-bottom: 12px !important;
}
.nad-welcome__subtitle {
	margin: 0 0 24px !important;
	color: var(--nad-text-muted) !important;
	font-size: 14px !important;
}

/* ==========================================================================
   Summary cards
   ========================================================================== */
.nad-summary-cards {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	margin-bottom: 20px !important;
}
@media (max-width: 1024px) {
	.nad-summary-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.nad-summary-cards { grid-template-columns: 1fr !important; }
}

.nad-card {
	background: var(--nad-card) !important;
	border: 1px solid var(--nad-border) !important;
	border-radius: var(--nad-radius) !important;
	box-shadow: var(--nad-shadow) !important;
	padding: 18px 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	text-decoration: none !important;
	color: inherit !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}
.nad-card:hover {
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08) !important;
	transform: translateY(-1px) !important;
}
.nad-card__icon {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: #F6EFE2 !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.nad-card__text {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}
.nad-card__value {
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}
.nad-card__label {
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	color: var(--nad-text-muted) !important;
	margin-top: 2px !important;
	white-space: nowrap !important;
}

/* ==========================================================================
   Quick action buttons
   ========================================================================== */
.nad-quick-actions {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 14px !important;
	margin-bottom: 32px !important;
}
@media (max-width: 1024px) {
	.nad-quick-actions { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.nad-quick-actions { grid-template-columns: 1fr !important; }
}

.nad-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 46px !important;
	padding: 0 18px !important;
	border-radius: 8px !important;
	border: 1px solid var(--nad-border) !important;
	background: #fff !important;
	color: var(--nad-text) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.nad-btn:hover {
	background: #F6F6F7 !important;
}
.nad-btn--gold {
	background: var(--nad-gold) !important;
	border-color: var(--nad-gold) !important;
	color: #fff !important;
}
.nad-btn--gold:hover {
	background: var(--nad-gold-dark) !important;
}
.nad-btn--small {
	height: 36px !important;
	font-size: 12px !important;
	width: 100% !important;
	margin-top: 10px !important;
}

/* ==========================================================================
   Sections (recent orders / stock alerts shared)
   ========================================================================== */
.nad-section {
	margin-bottom: 32px !important;
}
.nad-section__title {
	font-size: 17px !important;
	font-weight: 700 !important;
	margin: 0 0 14px !important;
}

.nad-empty-state {
	background: var(--nad-card) !important;
	border: 1px solid var(--nad-border) !important;
	border-radius: var(--nad-radius) !important;
	padding: 28px !important;
	text-align: center !important;
	color: var(--nad-text-muted) !important;
}
.nad-empty-state p {
	margin: 0 0 14px !important;
}

/* ==========================================================================
   Recent orders table
   ========================================================================== */
.nad-table-wrap {
	border: 1px solid var(--nad-border) !important;
	border-radius: var(--nad-radius) !important;
	overflow: hidden !important;
	background: var(--nad-card) !important;
}
.nad-orders-table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 13px !important;
}
.nad-orders-table thead th {
	background: var(--nad-header-dark) !important;
	color: #fff !important;
	text-align: left !important;
	padding: 12px 18px !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
}
.nad-orders-table tbody td {
	padding: 14px 18px !important;
	border-top: 1px solid var(--nad-border) !important;
}
.nad-orders-table tbody tr:first-child td {
	border-top: none !important;
}
.nad-view-link {
	color: var(--nad-gold-dark) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}
.nad-view-link:hover {
	text-decoration: underline !important;
}
.nad-see-all {
	display: inline-block !important;
	margin-top: 12px !important;
	color: var(--nad-gold-dark) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* status badges */
.nad-badge {
	display: inline-block !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
}
.nad-badge--onhold     { background: var(--nad-badge-onhold-bg) !important; color: var(--nad-badge-onhold-text) !important; }
.nad-badge--cancelled  { background: var(--nad-badge-cancelled-bg) !important; color: var(--nad-badge-cancelled-text) !important; }
.nad-badge--completed  { background: var(--nad-badge-completed-bg) !important; color: var(--nad-badge-completed-text) !important; }
.nad-badge--processing { background: var(--nad-badge-processing-bg) !important; color: var(--nad-badge-processing-text) !important; }
.nad-badge--failed,
.nad-badge--refunded,
.nad-badge--pending,
.nad-badge--neutral    { background: var(--nad-badge-neutral-bg) !important; color: var(--nad-badge-neutral-text) !important; }

/* Responsive orders table -> cards on mobile */
@media (max-width: 640px) {
	.nad-orders-table thead { display: none !important; }
	.nad-orders-table, .nad-orders-table tbody, .nad-orders-table tr, .nad-orders-table td {
		display: block !important;
		width: 100% !important;
	}
	.nad-orders-table tr {
		padding: 14px 18px !important;
		border-top: 1px solid var(--nad-border) !important;
	}
	.nad-orders-table tbody tr:first-child { border-top: none !important; }
	.nad-orders-table td {
		border: none !important;
		padding: 4px 0 !important;
		display: flex !important;
		justify-content: space-between !important;
		gap: 10px !important;
	}
	.nad-orders-table td::before {
		content: attr(data-label) !important;
		font-weight: 600 !important;
		color: var(--nad-text-muted) !important;
		font-size: 11px !important;
	}
}

/* ==========================================================================
   Stock alert product cards
   ========================================================================== */
.nad-stock-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 14px !important;
}
@media (max-width: 1024px) {
	.nad-stock-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.nad-stock-grid { grid-template-columns: 1fr !important; }
}

.nad-stock-card {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: var(--nad-card) !important;
	border: 1px solid var(--nad-border) !important;
	border-left: 3px solid var(--nad-border) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	text-decoration: none !important;
	color: var(--nad-text) !important;
}
.nad-stock-card.is-available {
	border-left-color: #2E8540 !important;
}
.nad-stock-card__thumb img {
	width: 48px !important;
	height: 48px !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	display: block !important;
}
.nad-stock-card__info {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0 !important;
}
.nad-stock-card__name {
	font-size: 13px !important;
	font-weight: 600 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.nad-stock-card__status {
	font-size: 11px !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	color: var(--nad-text-muted) !important;
}
.nad-stock-card__dot {
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: var(--nad-text-muted) !important;
}
.nad-stock-card.is-available .nad-stock-card__status { color: #2E8540 !important; }
.nad-stock-card.is-available .nad-stock-card__dot { background: #2E8540 !important; }
.nad-unsubscribe-alert {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
}

/* ==========================================================================
   Shopping lists page
   ========================================================================== */
.nad-page__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 18px !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}
.nad-page__header h2 {
	margin: 0 !important;
	font-size: 18px !important;
}

.nad-lists-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
}
@media (max-width: 1024px) {
	.nad-lists-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
	.nad-lists-grid { grid-template-columns: 1fr !important; }
}

.nad-list-card {
	background: var(--nad-card) !important;
	border: 1px solid var(--nad-border) !important;
	border-radius: var(--nad-radius) !important;
	padding: 16px !important;
}
.nad-list-card__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 10px !important;
}
.nad-list-card__name {
	margin: 0 !important;
	font-size: 15px !important;
}
.nad-list-card__actions {
	display: flex !important;
	gap: 6px !important;
}
.nad-list-card__items {
	list-style: none !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}
.nad-list-card__item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 6px 0 !important;
	border-top: 1px solid var(--nad-border) !important;
	font-size: 13px !important;
}
.nad-list-card__item:first-child { border-top: none !important; }
.nad-list-card__item-qty {
	color: var(--nad-text-muted) !important;
	margin-left: auto !important;
	margin-right: 8px !important;
}
.nad-list-card__empty {
	color: var(--nad-text-muted) !important;
	font-size: 13px !important;
}

.nad-icon-btn {
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	color: var(--nad-text-muted) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	padding: 4px !important;
}
.nad-icon-btn:hover {
	color: var(--nad-text) !important;
}

.nad-hint {
	color: var(--nad-text-muted) !important;
	font-size: 12px !important;
	margin-top: 20px !important;
}

/* ==========================================================================
   Forms (Request Reference)
   ========================================================================== */
.nad-form {
	background: var(--nad-card) !important;
	border: 1px solid var(--nad-border) !important;
	border-radius: var(--nad-radius) !important;
	padding: 20px !important;
	max-width: 520px !important;
}
.nad-form__row {
	margin-bottom: 14px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}
.nad-form__row label {
	font-size: 13px !important;
	font-weight: 600 !important;
}
.nad-form__row input,
.nad-form__row textarea {
	border: 1px solid var(--nad-border) !important;
	border-radius: 6px !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	font-family: inherit !important;
}
.nad-form__row input:focus,
.nad-form__row textarea:focus {
	outline: 2px solid var(--nad-gold) !important;
	outline-offset: 1px !important;
}
.nad-form__row--readonly input {
	background: #F6F6F7 !important;
	color: var(--nad-text-muted) !important;
}

.nad-feedback {
	padding: 12px 16px !important;
	border-radius: 8px !important;
	margin-bottom: 16px !important;
	font-size: 13px !important;
}
.nad-feedback--success {
	background: var(--nad-badge-completed-bg) !important;
	color: var(--nad-badge-completed-text) !important;
}
.nad-feedback--error {
	background: var(--nad-badge-cancelled-bg) !important;
	color: var(--nad-badge-cancelled-text) !important;
}

/* Keyboard focus visibility, site-wide within the dashboard */
.nad-dashboard a:focus-visible,
.nad-page a:focus-visible,
.nad-btn:focus-visible,
.nad-icon-btn:focus-visible,
.nad-sidebar a:focus-visible {
	outline: 2px solid var(--nad-gold) !important;
	outline-offset: 2px !important;
}