/**
 * Desire Account Page - Structural styles only.
 *
 * Design philosophy: We build the walls, Avada chooses the paint.
 * - Layout (grid, flex, positioning, spacing): managed here
 * - Colors, fonts, sizing: inherited from Avada CSS variables wherever possible
 * - Avada variables reference: --awb-color1..8 (palette), --form_* (form fields),
 *   --body_typography-* (body text), --h3_typography-* (headings), --link_color, etc.
 *
 * @package DesireCustom
 */

/* ==========================================
   Hide Avada My Account greeting bar
   We provide our own dashboard greeting.
   The Avada heading (.avada-woocommerce-myaccount-heading) is kept —
   it provides consistent h2 headings on all My Account tabs.
   ========================================== */

.woocommerce-account .avada-myaccount-user {
	display: none;
}

/* Hide Avada's "Dashboard" heading on dashboard — we output our own "My Account" heading.
   :not(.desire-custom-heading) ensures only Avada's heading is hidden, not ours. */
.desire-account-dashboard .avada-woocommerce-myaccount-heading:not(.desire-custom-heading) {
	display: none;
}

/* ==========================================
   Referral Code Banner
   ========================================== */

.desire-referral-banner {
	margin-bottom: 12px;
	font-size: 0.85em;
	color: var(--awb-color6, #666);
	line-height: 1.5;
}

.desire-referral-banner span {
	display: block;
}

.desire-referral-banner strong {
	color: var(--awb-color7, #333);
}

/* ==========================================
   Profile Heading Row (heading + Edit button)
   ========================================== */

.desire-profile-heading-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--awb-color3, #e0e0e0);
}

.desire-profile-heading-row .avada-woocommerce-myaccount-heading {
	margin: 0;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

/* ==========================================
   Profile View (Read-Only)
   ========================================== */

.desire-profile-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 30px;
	margin-bottom: 30px;
}

.desire-profile-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.desire-profile-label {
	font-size: 0.85em;
	color: var(--awb-color6, #666);
}

.desire-profile-value {
	color: var(--body_typography-color, inherit);
}

/* ==========================================
   Profile Edit Form
   ========================================== */

.desire-profile-form-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 30px;
}

.desire-readonly-value {
	display: block;
	padding: 8px 12px;
	background: var(--awb-color2, #f9f9fb);
	border: 1px solid var(--form_border_color, #d2d2d2);
	color: var(--awb-color6, #666);
	border-radius: var(--form_border_radius, 0);
}

/* Suppress Avada's ::after validation messages on profile fields */
.desire-profile-field-row::after {
	display: none !important;
	content: none !important;
}

/* Border-only validation (same approach as password reset).
   All validators use desire-field-invalid. Generic rule is in desire-common.css;
   this scoped rule ensures profile-specific specificity when needed. */
.desire-profile-field-row.desire-field-invalid input,
.desire-profile-field-row.desire-field-invalid select {
	border-color: var(--desire-invalid-border, #e0284f) !important;
	box-shadow: 0 0 1.5px 1px var(--desire-invalid-shadow, rgba(224,40,79,.65)) !important;
}

/* ==========================================
   Edit Address Page — Validation Styles
   Suppress Avada's ::after popup on phone/email fields,
   provide matching border colors, and style disabled button.
   ========================================== */

/* intl-tel-input wraps the phone input in .iti with display:inline-block,
   causing it to sit on the same line as the label. Force it to block. */
.woocommerce-address-fields .iti {
	display: block;
	width: 100%;
}

/* Suppress Avada's "Please enter correct details" ::after on phone & email fields */
.woocommerce-address-fields #billing_phone_field::after,
.woocommerce-address-fields #billing_email_field::after,
.woocommerce-address-fields #shipping_phone_field::after,
.woocommerce-address-fields #shipping_email_field::after {
	display: none !important;
	content: none !important;
}

/* Invalid border — same red as profile validation */
.woocommerce-address-fields .form-row.woocommerce-invalid input[type="tel"],
.woocommerce-address-fields .form-row.woocommerce-invalid input[type="email"] {
	border-color: var(--desire-invalid-border, #e0284f) !important;
	box-shadow: 0 0 1.5px 1px var(--desire-invalid-shadow, rgba(224,40,79,.65)) !important;
}

/* Phone/email error message text */
.woocommerce-address-fields .desire-phone-error,
.woocommerce-address-fields .desire-email-error {
	display: block;
	margin-top: 4px;
	font-size: 0.85em;
	color: var(--desire-invalid-border, #e0284f);
}

/* ==========================================
   Profile Actions (Save/Cancel buttons)
   ========================================== */

.desire-profile-actions {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-top: 25px;
}

.desire-profile-submit[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================
   Profile Addresses
   ========================================== */

.desire-profile-addresses {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--awb-color3, #e0e0e0);
}

.desire-profile-addresses h3 {
	margin-bottom: 16px;
}

.desire-address-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.desire-address-card {
	padding: 20px;
	border: 1px solid var(--awb-color3, #e0e0e0);
}

.desire-address-card h4 {
	margin: 0 0 10px 0;
}

.desire-address-card address {
	font-style: normal;
	line-height: 1.6;
	margin-bottom: 12px;
}

.desire-no-address {
	color: var(--awb-color6, #999);
	font-style: italic;
}

.desire-address-card .fusion-button {
	margin-top: 8px;
}

/* ==========================================
   Marketing Materials
   ========================================== */

.desire-marketing-materials {
	max-width: 100%;
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
	.desire-profile-fields,
	.desire-profile-form-fields,
	.desire-address-cards {
		grid-template-columns: 1fr;
	}

	.desire-profile-heading-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.desire-profile-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}