/* otp-auth: user dashboard (orders / addresses / profile)
   These variables are ALSO defined in login.css's :root block — duplicated
   here on purpose (same values, harmless if both load) so this file renders
   correctly on its own even if login.css fails to load or loads out of
   order on some host/caching setup. */

:root {
	--otp-primary: var( --color-primary, #2f6fed );
	--otp-primary-hover: var( --color-primary-hover, #1f5adb );
	--otp-text: var( --color-text, #1a2b3c );
	--otp-muted: var( --color-muted, #6b7280 );
	--otp-border: var( --color-border, #e2e5ea );
	--otp-bg: var( --color-bg, #ececec );
	--otp-card-bg: var( --color-surface, #ffffff );
	--otp-error: var( --color-error, #d84040 );
	--otp-success: var( --color-success, #1a7f5a );
}

.otp-dash-wrapper {
	padding: 32px 16px;
	box-sizing: border-box;
	font-family: inherit;
}

.otp-dash-wrapper button,
.otp-dash-wrapper input,
.otp-dash-wrapper a {
	all: unset;
	box-sizing: border-box;
}

/* Wider overall layout + main content column gets most of the space,
   since profile editing (name/email/phone) needs room to breathe. */
.otp-dash-layout {
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
	border: 1px solid var( --otp-border );
	border-radius: 14px;
	overflow: hidden;
	background: var( --otp-card-bg );
	align-items: flex-start;
}

.otp-dash-sidebar {
	width: 280px;
	flex-shrink: 0;
	padding: 24px 20px;
	border-inline-end: 1px solid var( --otp-border );
	box-sizing: border-box;
	position: sticky;
	top: 20px;
	align-self: flex-start;
}

.otp-dash-main {
	flex: 1;
	min-width: 0;
	padding: 28px 36px;
	box-sizing: border-box;
}

.otp-dash-user {
	position: relative;
	text-align: center;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --otp-border );
	margin-bottom: 6px;
}

.otp-dash-user-edit {
	display: block !important;
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	color: var( --otp-muted ) !important;
	cursor: pointer;
}

.otp-dash-user-edit:hover {
	color: var( --otp-primary ) !important;
}

.otp-dash-user-name {
	font-weight: 700;
	font-size: 15px;
	color: var( --otp-text ) !important;
	margin-top: 4px;
}

.otp-dash-user-phone {
	font-size: 13px;
	color: var( --otp-muted ) !important;
	margin-top: 2px;
	unicode-bidi: plaintext;
}

.otp-dash-nav {
	display: flex;
	flex-direction: column;
}

.otp-dash-nav-item {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 14px 4px;
	border-bottom: 1px solid var( --otp-border );
	color: var( --otp-text ) !important;
	font-size: 14px;
	cursor: pointer;
}

.otp-dash-nav-item:last-child {
	border-bottom: none;
}

.otp-dash-nav-item.is-active {
	color: var( --otp-primary ) !important;
	font-weight: 700;
}

.otp-dash-logout {
	color: var( --otp-error ) !important;
}

.otp-dash-title {
	font-size: 18px;
	font-weight: 700;
	color: var( --otp-text ) !important;
	margin: 0 0 20px;
}

.otp-dash-tabs {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid var( --otp-border );
	margin-bottom: 20px;
	overflow-x: auto;
}

.otp-dash-tab {
	display: flex !important;
	align-items: center;
	gap: 6px;
	padding: 10px 2px;
	font-size: 14px;
	color: var( --otp-muted ) !important;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.otp-dash-tab.is-active {
	color: var( --otp-error ) !important;
	border-bottom-color: var( --otp-error );
	font-weight: 700;
}

.otp-dash-count {
	background: #e9ebef;
	color: var( --otp-muted ) !important;
	font-size: 11px;
	padding: 1px 7px;
	border-radius: 10px;
}

.otp-dash-tab.is-active .otp-dash-count {
	background: var( --otp-error );
	color: #fff !important;
}

.otp-dash-order-card {
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 1px solid var( --otp-border );
	border-radius: 10px;
	margin-bottom: 12px;
	color: inherit !important;
	cursor: pointer;
}

.otp-dash-chevron {
	color: var( --otp-muted );
	display: flex;
}

.otp-dash-order-info {
	flex: 1;
	min-width: 0;
}

.otp-dash-order-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 8px;
	color: var( --otp-text );
}

.otp-dash-order-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var( --otp-muted );
}

.otp-dash-empty {
	color: var( --otp-muted );
	font-size: 14px;
	padding: 24px 0;
	text-align: center;
}

.otp-dash-address-card {
	border: 1px solid var( --otp-border );
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 12px;
}

.otp-dash-address-label {
	font-size: 12px;
	color: var( --otp-muted );
	margin-bottom: 4px;
}

.otp-dash-address-name {
	font-weight: 700;
	color: var( --otp-text );
	margin-bottom: 4px;
}

.otp-dash-address-full {
	font-size: 13px;
	color: var( --otp-text );
}

.otp-dash-address-edit-link {
	margin-top: 12px;
	max-width: 260px;
}

.otp-dash-note {
	font-size: 12px;
	color: var( --otp-muted );
	margin-top: 14px;
}

/* Profile grid — wide columns since fields (esp. phone re-verify boxes)
   need room. */
.otp-dash-profile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.otp-dash-profile-field {
	border: 1px solid var( --otp-border );
	border-radius: 10px;
	padding: 18px 20px;
}

.otp-dash-field-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.otp-dash-field-label {
	font-size: 13px;
	color: var( --otp-muted );
	display: flex;
	align-items: center;
	gap: 8px;
}

.otp-dash-edit-btn {
	display: flex !important;
	color: var( --otp-muted ) !important;
	cursor: pointer;
}

.otp-dash-edit-btn:hover {
	color: var( --otp-primary ) !important;
}

.otp-dash-add-btn {
	font-size: 18px;
	font-weight: 700;
	color: var( --otp-primary ) !important;
	line-height: 1;
}

.otp-dash-field-value {
	font-weight: 700;
	color: var( --otp-text );
	font-size: 15px;
	unicode-bidi: plaintext;
}

.otp-dash-badge {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
}

.otp-dash-badge-success {
	background: #e5f7ee;
	color: var( --otp-success );
}

.otp-dash-field-edit {
	display: flex !important;
	gap: 8px;
	margin-top: 10px;
}

.otp-dash-field-edit input {
	display: block !important;
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var( --otp-border ) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var( --otp-text ) !important;
}

.otp-dash-save-btn {
	display: block !important;
	padding: 10px 16px;
	background: var( --otp-primary ) !important;
	color: #fff !important;
	border-radius: 8px !important;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.otp-dash-save-btn:hover {
	background: var( --otp-primary-hover ) !important;
}

@media ( max-width: 900px ) {
	.otp-dash-profile-grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 768px ) {
	.otp-dash-layout {
		flex-direction: column;
	}
	.otp-dash-sidebar {
		width: 100%;
		border-inline-end: none;
		border-bottom: 1px solid var( --otp-border );
		position: static;
	}
	.otp-dash-main {
		padding: 20px;
	}
}