/**
 * Salsync Forms Addon — brand styling for MagicForm.
 *
 * Brand primary: #ff0b0b, white text, 10px radius.
 * Scoped to MagicForm forms and the add-on's own elements so other UI on the
 * site is untouched.
 */

:root {
	--salsync-brand: #ff0b0b;
	--salsync-brand-dark: #d60000;
	--salsync-brand-soft: rgba(255, 11, 11, 0.12);
	--salsync-radius: 10px;
	--salsync-border: #d1d5db;
}

/* ------------------------------------------------------------------ *
 * Inputs — clean, rounded, branded focus ring
 * ------------------------------------------------------------------ */

form.magicform .mf-form-control,
form.magicform input[type='text'],
form.magicform input[type='email'],
form.magicform input[type='number'],
form.magicform input[type='tel'],
form.magicform input[type='date'],
form.magicform input[type='password'],
form.magicform select,
form.magicform textarea {
	border: 1px solid var(--salsync-border);
	border-radius: var(--salsync-radius);
	background-color: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form.magicform .mf-form-control:focus,
form.magicform input:focus,
form.magicform select:focus,
form.magicform textarea:focus {
	outline: none;
	border-color: var(--salsync-brand);
	box-shadow: 0 0 0 3px var(--salsync-brand-soft);
}

/* ------------------------------------------------------------------ *
 * Multi-step stepper + navigation buttons
 * ------------------------------------------------------------------ */

form.magicform .mf-multistep-nav-item {
	border-radius: var(--salsync-radius);
	cursor: pointer;
}

form.magicform .mf-multistep-nav-item:hover .mf-multistep-page-icon {
	background-color: var(--salsync-brand-soft);
	color: var(--salsync-brand);
}

form.magicform .mf-multistep-page-icon {
	background-color: #e5e7eb;
	color: #374151;
	transition: background-color 0.15s ease, color 0.15s ease;
}

form.magicform .mf-multistep-nav-item.mf-multistep-nav-item-active .mf-multistep-page-icon {
	background-color: var(--salsync-brand);
	color: #ffffff;
}

form.magicform .mf-next-btn,
form.magicform .mf-back-btn,
form.magicform .mf-submit-btn {
	border-radius: var(--salsync-radius);
	min-height: 44px;
}

form.magicform .mf-next-btn,
form.magicform .mf-submit-btn {
	background-color: var(--salsync-brand);
	border: 1px solid var(--salsync-brand);
	color: #ffffff;
}

form.magicform .mf-next-btn:hover,
form.magicform .mf-submit-btn:hover {
	background-color: var(--salsync-brand-dark);
	border-color: var(--salsync-brand-dark);
}

form.magicform .mf-back-btn {
	background-color: transparent;
	border: 1px solid var(--salsync-border);
	color: #374151;
}

form.magicform .mf-back-btn:hover {
	border-color: var(--salsync-brand);
	color: var(--salsync-brand);
}

/* ------------------------------------------------------------------ *
 * Repeatable add / remove buttons
 * ------------------------------------------------------------------ */

.salsync-repeater-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px; /* comfortable tap target */
	min-width: 48px;
	padding: 8px 16px;
	border-radius: var(--salsync-radius);
	border: 1px solid var(--salsync-border);
	background-color: #ffffff;
	color: #374151;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.salsync-repeater-btn svg {
	flex: 0 0 auto;
}

.salsync-repeater-add {
	margin-top: 8px;
	color: var(--salsync-brand);
	border-color: var(--salsync-brand);
}

.salsync-repeater-add:hover {
	background-color: var(--salsync-brand);
	color: #ffffff;
}

.salsync-repeater-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	min-width: 40px;
	min-height: 40px;
	padding: 8px;
	border-radius: 8px;
	background-color: #f9fafb;
	color: #6b7280;
}

.salsync-repeater-remove:hover {
	background-color: var(--salsync-brand);
	border-color: var(--salsync-brand);
	color: #ffffff;
}

/* Give each repeatable row room for its remove button. */
.salsync-repeatable > * {
	position: relative;
	padding-right: 52px;
}

/* ------------------------------------------------------------------ *
 * Finance button (shortcode)
 * ------------------------------------------------------------------ */

.salsync-finance-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid var(--salsync-brand);
	border-radius: var(--salsync-radius);
	background-color: var(--salsync-brand);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.salsync-finance-button:hover {
	background-color: var(--salsync-brand-dark);
	border-color: var(--salsync-brand-dark);
}

.salsync-finance-button:active {
	transform: translateY(1px);
}

/* ------------------------------------------------------------------ *
 * Save Draft button
 * ------------------------------------------------------------------ */

.salsync-save-draft {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	margin-right: 10px;
	border: 1px solid var(--salsync-brand);
	border-radius: var(--salsync-radius);
	background-color: #ffffff;
	color: var(--salsync-brand);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.salsync-save-draft:hover {
	background-color: var(--salsync-brand-soft);
}

/* ------------------------------------------------------------------ *
 * Toast (draft saved / restored feedback)
 * ------------------------------------------------------------------ */

.salsync-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	z-index: 99999;
	padding: 12px 24px;
	border-radius: var(--salsync-radius);
	background-color: var(--salsync-brand);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.salsync-toast-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}