/* ================================
   ACCOUNT SETTINGS – FIGMA STYLE
   ================================ */

body.woocommerce-edit-account .figma-account-form {
	max-width: 900px;
	margin: 0 auto;
}

/* Card */
body.woocommerce-edit-account .figma-account-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 32px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	border: solid 1px #a3a3a336;
}

/* Title */
body.woocommerce-edit-account .account-title {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 24px;
	color: #111;
}

/* Top section */
body.woocommerce-edit-account .account-top {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

/* Avatar */
body.woocommerce-edit-account .account-avatar {
	display: flex;
	align-items: center;
	gap: 16px;
}

body.woocommerce-edit-account .avatar-circle,
body.woocommerce-edit-account .avatar-circle img{
	width: 80px;
	height: 80px;
	border-radius: 20%;
	background: #9c26ff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 600;
	object-fit: cover;
}

body.woocommerce-edit-account .btn-upload {
	font-size: 13px;
	color: #ffffff;
	cursor: pointer;
	font-weight: 500;
    background-color: #E54400;
    padding: .5rem 1rem;
    border-radius: 10px;
    font-family: 'Montserrat';
}

body.woocommerce-edit-account .btn-upload:hover{
    background: #e85d00;
    transform: translateY(-1px);
}

/* Fields */
body.woocommerce-edit-account .account-fields {
	margin-top: 20px;
}

body.woocommerce-edit-account .field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 18px;
}

body.woocommerce-edit-account .field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #666;
	margin-bottom: 6px;
}

body.woocommerce-edit-account .field input {
	width: 100%;
	height: 44px;
	border-radius: 8px;
	border: 1px solid #e6e6e6;
	background: #f5f5f5;
	padding: 0 14px;
	font-size: 14px;
	transition: border-color 0.2s, background 0.2s;
}

body.woocommerce-edit-account .field input:focus {
	background: #ffffff;
	border-color: #9c26ff;
	outline: none;
}

/* Readonly email */
body.woocommerce-edit-account .field input[readonly] {
	background: #eeeeee;
	color: #999;
	cursor: not-allowed;
}

/* Checkbox */
body.woocommerce-edit-account .field-checkbox {
	margin: 16px 0;
	font-size: 13px;
	color: #444;
}

body.woocommerce-edit-account .field-checkbox input {
	margin-right: 8px;
	accent-color: #9c26ff;
}

/* Actions */
body.woocommerce-edit-account .account-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 30px;
}

body.woocommerce-edit-account .account-actions button {
	background: #E54400;
	color: #ffffff;
	border-radius: 10px;
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

body.woocommerce-edit-account .account-actions button:hover {
	background: #e85d00;
	transform: translateY(-1px);
}


/* ================================
   PASSWORD TOGGLE EYE
   ================================ */
   
.password-wrapper {
	position: relative;
}

/* Default: password hidden → show eye */
.toggle-password .eye-hide {
	display: none;
}

/* Password visible → show eye-off */
.toggle-password.is-visible .eye-show {
	display: none;
}

.toggle-password.is-visible .eye-hide {
	display: inline;
}


.password-wrapper input {
	padding-right: 44px;
}

.toggle-password {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	height: 40px;
}

button.toggle-password:hover,
button.toggle-password:focus{
    background-color: transparent !important;
}


.account-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: #323232;
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 9999;
}




/* ================================
   MOBILE
   ================================ */
@media (max-width: 768px) {

	body.woocommerce-edit-account .figma-account-card {
		padding: 22px;
	}

	body.woocommerce-edit-account .field-row {
		grid-template-columns: 1fr;
	}

	body.woocommerce-edit-account .account-actions {
		justify-content: stretch;
	}

	body.woocommerce-edit-account .account-actions button {
		width: 100%;
	}
}