/**
 * Desire Common Styles — Shared design tokens & component styles.
 *
 * Loaded on every page where the plugin is active (registration, account, WC password).
 * Single source of truth for functional colour tokens and reusable component styles.
 *
 * 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
 * - Functional indicators (error/valid): centralised custom properties below
 *
 * @package DesireCustom
 */

/* ==========================================
   Design Tokens — Functional UX colours
   ========================================== */

:root {
	--desire-error-color: #e0284f;
	--desire-invalid-border: #e0284f;
	--desire-invalid-shadow: rgba(224,40,79,.65);
}

/* ==========================================
   Error / Validation Messages
   ========================================== */

.desire-password-strength-error,
.desire-password-error,
.desire-phone-error,
.desire-email-error,
.desire-id-error,
.desire-server-error {
	display: block;
	color: var(--desire-error-color);
	font-size: 0.85em;
	margin-top: 5px;
}

/* ==========================================
   Password Hint Text
   ========================================== */

.desire-password-hint {
	display: block;
	color: var(--awb-color6, #666);
	font-size: 0.85em;
	margin-top: 5px;
	line-height: 1.4;
}

/* ==========================================
   Validation Borders (all validated fields)
   ========================================== */

.desire-validated-field::after {
	display: none !important;
	content: none !important;
}

.desire-validated-field.desire-field-invalid input,
.desire-validated-field.desire-field-invalid select {
	border-color: var(--desire-invalid-border) !important;
	box-shadow: 0 0 1.5px 1px var(--desire-invalid-shadow) !important;
}

/* Neutralise WooCommerce/Avada green "valid" border on fields we manage.
   WC JS adds woocommerce-validated on blur — higher specificity here ensures
   the border stays normal instead of turning green. */
.desire-validated-field.woocommerce-validated input,
.desire-validated-field.woocommerce-validated select {
	border-color: var(--form_border_color, #d2d2d2) !important;
	box-shadow: none !important;
}

/* ==========================================
   Disabled Submit Button
   ========================================== */

.woocommerce-ResetPassword button[type="submit"][disabled],
.woocommerce-ResetPassword input[type="submit"][disabled],
.woocommerce-EditAccountForm button[type="submit"][disabled],
.woocommerce-EditAccountForm input[type="submit"][disabled],
.desire-registration-form button[type="submit"][disabled],
form[class*="desire-register-"] button[type="submit"][disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================
   Optional Label (shared by registration & profile)
   ========================================== */

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

/* ==========================================
   Registration Form Layout
   ========================================== */

/* 3-column responsive grid */
.desire-registration-form .desire-form-fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
	gap: 30px !important;
	width: 100% !important;
}

@media (max-width: 900px) {
	.desire-registration-form .desire-form-fields {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 600px) {
	.desire-registration-form .desire-form-fields {
		grid-template-columns: 1fr !important;
	}
}

/* Section titles — font from Avada, border from Avada palette */
.desire-registration-form .desire-section-title {
	grid-column: 1 / -1;
	font-size: var(--h4_typography-font-size, 1.2em);
	font-weight: var(--h4_typography-font-weight, 400);
	margin: 10px 0 0 0;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--awb-color3, #ddd);
}

/* Form divider */
.desire-registration-form .desire-form-divider {
	grid-column: 1 / -1;
	border: 0;
	border-top: 1px solid var(--awb-color3, #ddd);
	margin: 20px 0;
}

.desire-registration-form .desire-form-full-width {
	grid-column: 1 / -1;
}

/* ==========================================
   RSA ID Composite Field
   ========================================== */

.desire-id-field-wrapper {
	display: flex;
	gap: 0;
}

.desire-id-field-wrapper .desire-id-type-select {
	width: auto;
	min-width: 120px;
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.desire-id-field-wrapper .desire-id-input {
	flex: 1;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

@media (max-width: 400px) {
	.desire-id-field-wrapper {
		flex-direction: column;
	}

	.desire-id-field-wrapper .desire-id-type-select {
		border-right: 1px solid var(--form_border_color, #d2d2d2);
		border-radius: var(--form_border_radius, 0);
		border-bottom: none;
		min-width: auto;
	}

	.desire-id-field-wrapper .desire-id-input {
		border-radius: var(--form_border_radius, 0);
	}
}

/* ==========================================
   Password Row 2-Column Sub-Grid
   ========================================== */

.desire-password-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	grid-column: 1 / -1;
}

.desire-password-row > p {
	margin: 0;
}

@media (max-width: 600px) {
	.desire-password-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================
   T&C Checkbox
   ========================================== */

.desire-tc-row {
	margin-top: 15px;
}

.desire-tc-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.desire-tc-checkbox-label input[type="checkbox"] {
	margin-top: 4px;
}

.desire-tc-checkbox-label span {
	flex: 1;
}

/* ==========================================
   Different Address Checkbox & Shipping Section
   ========================================== */

.desire-different-address-wrapper {
	margin-top: 15px;
}

.desire-different-address-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Shipping section (hidden by default, shown via JS) */
.desire-shipping-section {
	display: none;
	margin-top: 15px;
}

.desire-section-title--flush {
	margin-top: 0;
}

/* ==========================================
   Submit Row
   ========================================== */

.desire-submit-row {
	margin-top: 20px;
}

/* ==========================================
   Address Highlight Box
   (checkout prefill + account default address)
   ========================================== */

.desire-prefilled-address {
	padding: 10px 12px;
	background: var(--awb-color2, #f0f7fc);
	border-left: 3px solid var(--link_color, #0073aa);
	margin-bottom: 15px;
	border-radius: 3px;
}

.desire-prefilled-address .desire-change-address-link {
	font-size: 0.9em;
}