/* ============================================================
 * Forksy Business — frontend styles for /business/* pages.
 * ============================================================ */

.forksy-register,
.forksy-dashboard {
	max-width: 800px;
	margin: 2rem auto;
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #1F2742;
}

/* Wide variant for the owner dashboard — extra room for menus + photos */
.forksy-dashboard-wide {
	max-width: 1100px;
	padding: 0 1.5rem;
}

.forksy-register h2,
.forksy-dashboard h1,
.forksy-dashboard h2 {
	font-weight: 800;
	letter-spacing: -0.01em;
}

.forksy-register .forksy-lede {
	color: rgba(31, 39, 66, 0.65);
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 2rem;
}

.forksy-form fieldset {
	background: #fff;
	border: 1px solid rgba(31, 39, 66, 0.08);
	border-radius: 16px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.forksy-form legend {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(31, 39, 66, 0.6);
	padding: 0 0.5rem;
}

.forksy-form label {
	display: block;
	margin-bottom: 1rem;
	font-weight: 600;
	font-size: 14px;
}

.forksy-form input[type=text],
.forksy-form input[type=email],
.forksy-form input[type=url],
.forksy-form input[type=password],
.forksy-form input[type=number],
.forksy-form select,
.forksy-form textarea {
	display: block;
	width: 100%;
	padding: 0.7rem 1rem;
	margin-top: 0.4rem;
	border: 1px solid rgba(31, 39, 66, 0.15);
	border-radius: 10px;
	font: inherit;
	color: #1F2742;
	background: #FFF7EE;
	box-sizing: border-box;
}

.forksy-form input:focus,
.forksy-form textarea:focus,
.forksy-form select:focus {
	outline: none;
	border-color: #FF4458;
	box-shadow: 0 0 0 3px rgba(255, 68, 88, 0.15);
}

.forksy-form small {
	display: block;
	margin-top: 0.3rem;
	color: rgba(31, 39, 66, 0.55);
	font-weight: 400;
	font-size: 12px;
}

.forksy-form .req {
	color: #FF4458;
}

.forksy-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

/* Wider form helpers — used in dashboard cards */
.forksy-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.forksy-row-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 720px) {
	.forksy-row-2,
	.forksy-row-3 {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.forksy-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
}
.forksy-field > span {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(31, 39, 66, 0.65);
	margin-bottom: 0.4rem;
	text-transform: none;
}
.forksy-field > input,
.forksy-field > textarea,
.forksy-field > select {
	width: 100%;
	padding: 0.85rem 1rem !important;
	margin-top: 0 !important;
	border: 1px solid rgba(31, 39, 66, 0.15);
	border-radius: 12px;
	background: #FFF7EE;
	color: #1F2742;
	font: inherit;
	font-size: 15px;
	box-sizing: border-box;
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.forksy-field > textarea {
	resize: vertical;
	min-height: 64px;
}
.forksy-field > input:focus,
.forksy-field > textarea:focus,
.forksy-field > select:focus {
	outline: none;
	border-color: #FF4458;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 68, 88, 0.15);
}
.forksy-field-grow-2 { grid-column: span 2; }
@media (max-width: 720px) { .forksy-field-grow-2 { grid-column: span 1; } }
.forksy-field-action {
	justify-content: flex-end;
}

.forksy-form button.forksy-btn,
.forksy-btn {
	background: #FF4458;
	color: #fff;
	border: none;
	padding: 1rem 2rem;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background 150ms ease;
}
.forksy-btn:hover { background: #E03249; }

.forksy-btn-secondary {
	background: #FFF7EE;
	color: #1F2742;
	border: 1px solid rgba(31, 39, 66, 0.15);
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	margin-top: 0.5rem;
}

.forksy-fineprint {
	margin-top: 1rem;
	font-size: 12px;
	color: rgba(31, 39, 66, 0.55);
}

.forksy-success {
	background: #34D39915;
	border: 1px solid #34D399;
	border-radius: 16px;
	padding: 2rem;
	color: #1F2742;
}
.forksy-success h2 { color: #14a268; margin-top: 0; }

.forksy-error,
.forksy-error-callout {
	background: #EF444415;
	border: 1px solid #EF4444;
	border-radius: 12px;
	padding: 1rem;
	color: #b91c1c;
	margin-bottom: 1.5rem;
}

.forksy-callout {
	background: #FFB80020;
	border: 1px solid #FFB800;
	border-radius: 12px;
	padding: 1rem;
	margin-bottom: 1.5rem;
	font-size: 14px;
}
.forksy-success-callout {
	background: #34D39915;
	border-color: #34D399;
	color: #14a268;
}

/* Dashboard */
.forksy-dash-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(31, 39, 66, 0.08);
}
.forksy-dash-header small {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(31, 39, 66, 0.55);
}
.forksy-dash-header h1 {
	margin: 0.25rem 0;
	font-size: 32px;
}

.forksy-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.forksy-link {
	color: rgba(31, 39, 66, 0.6);
	text-decoration: none;
	font-size: 14px;
}
.forksy-link:hover { color: #FF4458; }

.forksy-help {
	color: rgba(31, 39, 66, 0.6);
	font-size: 14px;
	margin-bottom: 1rem;
}

/* Old narrow rows (kept for back-compat with patterns elsewhere) */
.forksy-menu-row,
.forksy-link-row {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.forksy-menu-row { grid-template-columns: 1fr 2fr 90px 70px; }
.forksy-link-row { grid-template-columns: 130px 2fr 1fr; }
.forksy-menu-row input,
.forksy-link-row input,
.forksy-link-row select {
	margin: 0 !important;
	padding: 0.55rem 0.75rem !important;
	font-size: 14px !important;
}

/* ============================================================
 * Photo upload UI — main hero, gallery, menu thumbnails
 * ============================================================ */
.forksy-photo-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	align-items: flex-start;
}
@media (max-width: 720px) {
	.forksy-photo-grid { grid-template-columns: 1fr; }
}

.forksy-photo-block { display: flex; flex-direction: column; }

.forksy-photo-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(31, 39, 66, 0.55);
	margin-bottom: 0.6rem;
}

.forksy-photo-preview {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #FFF7EE;
	border: 1px dashed rgba(31, 39, 66, 0.18);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 0.75rem;
}
.forksy-photo-preview img {
	width: 100%; height: 100%; object-fit: cover;
}
.forksy-photo-preview.is-set { border-style: solid; }
.forksy-photo-placeholder {
	color: rgba(31, 39, 66, 0.45);
	font-size: 13px;
	font-weight: 600;
}

.forksy-photo-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
}

.forksy-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 0.6rem;
	margin-bottom: 0.75rem;
	min-height: 96px;
	padding: 0.6rem;
	background: #FFF7EE;
	border: 1px dashed rgba(31, 39, 66, 0.18);
	border-radius: 16px;
}
.forksy-gallery-grid:empty::before {
	content: 'No gallery photos yet';
	color: rgba(31, 39, 66, 0.45);
	font-size: 13px;
	font-weight: 600;
	display: block;
	text-align: center;
	padding: 1rem;
	grid-column: 1 / -1;
}
.forksy-gallery-tile {
	position: relative;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.forksy-gallery-tile img { width: 100%; height: 100%; object-fit: cover; }
.forksy-gallery-remove {
	position: absolute;
	top: 4px; right: 4px;
	width: 22px; height: 22px;
	border-radius: 999px;
	background: rgba(31, 39, 66, 0.85);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
	padding: 0;
}
.forksy-gallery-remove:hover { background: #EF4444; }

/* ============================================================
 * Menu cards — photo on the left, fields on the right
 * ============================================================ */
.forksy-menu-card,
.forksy-link-card {
	background: #FFF7EE;
	border: 1px solid rgba(31, 39, 66, 0.08);
	border-radius: 16px;
	padding: 1.25rem;
	margin-bottom: 1rem;
}

.forksy-menu-card {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 1.25rem;
	align-items: flex-start;
}
@media (max-width: 720px) {
	.forksy-menu-card { grid-template-columns: 1fr; }
}

.forksy-menu-card-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.forksy-photo-mini {
	width: 100%;
	aspect-ratio: 1;
	background: #fff;
	border: 1px dashed rgba(31, 39, 66, 0.18);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: 28px;
	color: rgba(31, 39, 66, 0.35);
}
.forksy-photo-mini img { width: 100%; height: 100%; object-fit: cover; }
.forksy-photo-mini.is-set { border-style: solid; }

.forksy-menu-card-fields {
	display: flex;
	flex-direction: column;
}
.forksy-menu-card-fields .forksy-field { margin-bottom: 1rem; }
.forksy-menu-card-fields .forksy-field:last-child { margin-bottom: 0; }

/* ============================================================
 * Buttons — link style (text-only) for inline actions
 * ============================================================ */
.forksy-btn-link {
	background: transparent;
	border: 0;
	color: #FF4458;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	transition: background 150ms ease;
}
.forksy-btn-link:hover { background: rgba(255, 68, 88, 0.1); }

.forksy-menu-remove,
.forksy-link-remove {
	color: rgba(239, 68, 68, 0.85);
}

.forksy-btn-large {
	padding: 1.1rem 2.5rem !important;
	font-size: 17px !important;
}

.forksy-save-bar {
	position: sticky;
	bottom: 1rem;
	z-index: 5;
	display: flex;
	justify-content: flex-end;
	margin-top: 1.5rem;
	padding-top: 1rem;
}

[data-readonly="1"] input,
[data-readonly="1"] textarea,
[data-readonly="1"] select,
[data-readonly="1"] button {
	pointer-events: none;
	opacity: 0.55;
}

/* ============================================================
 * Sign-in screen — wraps wp_login_form() in our brand styles.
 * ============================================================ */

.forksy-signin {
	max-width: 460px;
	margin: 4rem auto;
	padding: 0 1.5rem;
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #1F2742;
}

.forksy-signin-card {
	background: #fff;
	border-radius: 24px;
	padding: 2.5rem 2rem;
	box-shadow: 0 24px 48px rgba(31, 39, 66, 0.08);
}

.forksy-signin-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FF4458;
	margin: 0 0 0.75rem;
}

.forksy-signin h1 {
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.75rem;
	color: #1F2742;
}

.forksy-signin .forksy-signin-sub {
	color: rgba(31, 39, 66, 0.6);
	margin: 0 0 1.75rem;
	font-size: 15px;
	line-height: 1.55;
}

.forksy-signin .forksy-signin-meta {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(31, 39, 66, 0.08);
	font-size: 14px;
	color: rgba(31, 39, 66, 0.6);
	text-align: center;
}

.forksy-signin .forksy-signin-meta a {
	color: #FF4458;
	font-weight: 700;
	text-decoration: none;
}

.forksy-signin .forksy-signin-meta a:hover {
	color: #E03249;
	text-decoration: underline;
}

/* WP's wp_login_form output — restyle the bare HTML */
.forksy-signin #loginform {
	margin: 0;
}

.forksy-signin #loginform p {
	margin: 0 0 1rem;
}

.forksy-signin #loginform label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(31, 39, 66, 0.7);
	margin-bottom: 0.4rem;
}

.forksy-signin #loginform input[type="text"],
.forksy-signin #loginform input[type="email"],
.forksy-signin #loginform input[type="password"] {
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(31, 39, 66, 0.15);
	border-radius: 12px;
	background: #FFF7EE;
	font: inherit;
	font-size: 15px;
	color: #1F2742;
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.forksy-signin #loginform input[type="text"]:focus,
.forksy-signin #loginform input[type="email"]:focus,
.forksy-signin #loginform input[type="password"]:focus {
	outline: none;
	border-color: #FF4458;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 68, 88, 0.15);
}

.forksy-signin #loginform .login-remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	color: rgba(31, 39, 66, 0.7);
	margin-bottom: 1.25rem;
}

.forksy-signin #loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: 500;
	letter-spacing: 0;
	cursor: pointer;
}

.forksy-signin #loginform .login-remember input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #FF4458;
	margin: 0;
}

.forksy-signin #loginform .login-submit {
	margin: 0;
}

.forksy-signin #loginform input[type="submit"],
.forksy-signin #loginform #wp-submit {
	width: 100%;
	display: block;
	background: #FF4458;
	color: #fff;
	border: none;
	padding: 1rem 2rem;
	border-radius: 999px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(255, 68, 88, 0.25);
	transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	text-transform: none;
}

.forksy-signin #loginform input[type="submit"]:hover,
.forksy-signin #loginform #wp-submit:hover {
	background: #E03249;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(255, 68, 88, 0.35);
}

.forksy-signin #loginform input[type="submit"]:active,
.forksy-signin #loginform #wp-submit:active {
	transform: translateY(0);
}

/* WP error notices (wrong password etc.) */
.forksy-signin #login_error,
.forksy-signin .login-error {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.5);
	color: #b91c1c;
	border-radius: 12px;
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
	font-size: 14px;
}