/* _shared/ui/personal_info_editor/style.css */

/* =========================================================================== */
/* Personal Info Editor UI Styles.                                             */
/* */
/* Styles for the personal information editor window, focusing on a clean,     */
/* native macOS-like appearance with standard form elements and buttons.       */
/* =========================================================================== */

/* =============================== */
/* =============================== */
/* ======= 1/ Reset & Base ======= */
/* =============================== */
/* =============================== */

* {
	box-sizing: border-box;
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* ====================================== */
/* ====================================== */
/* ======= 2/ Layout & Typography ======= */
/* ====================================== */
/* ====================================== */

body {
	background: var(--theme-page-background);
	color: var(--theme-grey-333);
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 14px;
	margin: 0 auto;
	max-width: 520px;
	padding: 24px;
}

h1 {
	color: var(--theme-label);
	font-size: 17px;
	margin: 0 0 16px;
}

/* ================================ */
/* ================================ */
/* ======= 3/ Form Elements ======= */
/* ================================ */
/* ================================ */

.row {
	margin-bottom: 11px;
}

label {
	color: var(--theme-grey-555);
	display: block;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 4px;
}

input {
	background: var(--theme-white);
	border: 1px solid var(--theme-grey-ccc);
	border-radius: 6px;
	color: var(--theme-label);
	font-size: 14px;
	outline: none;
	padding: 7px 10px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
	width: 100%;
}

input:focus {
	border-color: var(--theme-blue);
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* ===================================== */
/* ===================================== */
/* ======= 4/ Buttons & Controls ======= */
/* ===================================== */
/* ===================================== */

.btns {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 20px;
}

.btns .save {
	order: 2;
}

.btns .cancel {
	order: 1;
}

button {
	border: none;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 22px;
	transition: filter 0.1s;
}

button:hover {
	filter: brightness(0.9);
}

.cancel {
	background: var(--theme-grey-e0e0e0);
	color: var(--theme-grey-333);
}

.save {
	background: var(--theme-blue);
	color: var(--theme-white);
}