/* Additions for the Laravel port (forms, admin, buttons rendered as links). */
.inline-form { display: inline; }
.link-button { background: none; border: none; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.link-button:hover { color: #5A90CC; }
#mainmenu ul li:last-child { border-right: none; }
#mainmenu ul li.active a { color: #5A90CC; }
#mainmenu a.cart-link { color: #c79b1c; }
.breadcrumbs a { color: #5A90CC; }
.buttons-row { margin-top: 0.5em; }
.buttons-row form { display: inline; }
.button-cell { text-align: center; }
.errorSummary { border: 2px solid #C00; padding: 7px 7px 12px 7px; margin: 0 0 20px 0; background: #FEE; font-size: 0.9em; }
.errorSummary p { margin: 0; padding: 5px; }
.errorSummary ul { margin: 0; padding: 0 0 0 20px; }
.errorMessage { color: red; font-size: 0.9em; }
div.form input[type=text], div.form input[type=email], div.form input[type=password], div.form input[type=number], div.form textarea, div.form select { max-width: 100%; }
div.form .hint { color: #999; font-size: 0.9em; }

/* Admin */
.admin-nav { margin-bottom: 1em; }
.admin-nav a { display: inline-block; margin-right: 0.8em; color: #204f8d; }
.admin-nav a.active { font-weight: bold; text-decoration: underline; }
.admin-toolbar { display: flex; gap: 1em; align-items: center; justify-content: space-between; margin: 1em 0; }
.admin-toolbar form { display: flex; gap: 0.5em; }
table.admin-table { width: 100%; border-collapse: collapse; }
table.admin-table td { border-bottom: 1px solid #eee; }
table.admin-table tr:nth-child(even) td { background-color: #f4f8fd; }
.admin-form { width: auto !important; max-width: 760px; }
.admin-form textarea { width: 100%; }
.admin-form input[type=text] { width: 100%; }
.admin-media { margin-top: 2em; border-top: 1px solid #ccc; padding-top: 1em; }
.admin-media .thumbs { display: flex; flex-wrap: wrap; gap: 1em; }
.admin-media .thumbs div { text-align: center; font-size: 0.85em; }
.admin-media img { max-width: 160px; max-height: 120px; display: block; margin-bottom: 0.3em; }
.danger { color: #a00; }
nav[role=navigation] { margin-top: 1em; }
.pager { margin-top: 1em; }
.pager a, .pager span { display: inline-block; padding: 2px 8px; border: 1px solid #ccc; margin-right: 3px; }
.pager span.current { background: #5A90CC; color: white; border-color: #5A90CC; }

/* ------------------------------------------------------------------
   Forms: room to breathe + focus rings that aren't clipped.
   #content used overflow:auto (to contain floats), which sliced off
   the focus outline of any field at its left edge. flow-root contains
   floats the same way without clipping.
   ------------------------------------------------------------------ */
#content { overflow: visible; display: flow-root; }

div.form { max-width: 560px; }
div.form.admin-form { max-width: 760px; }

div.form .row { margin: 0 0 16px; }
div.form .row.buttons { margin-top: 20px; }
div.form label { margin-bottom: 5px; font-size: 13px; color: #333; }
div.form .rememberMe label { margin-bottom: 0; }
div.form p.note { margin: 0 0 18px; }

div.form input[type=text],
div.form input[type=email],
div.form input[type=password],
div.form input[type=number],
div.form input[type=search],
div.form input[type=tel],
div.form select,
div.form textarea {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid #b8c2cc;
	border-radius: 4px;
	background: #fff;
	color: #222;
	font: 14px/1.4 'PT Sans', Helvetica, sans-serif;
	transition: border-color .15s, box-shadow .15s;
}
div.form select { padding: 7px 8px; }
div.form textarea { min-height: 140px; resize: vertical; }

div.form input:focus,
div.form select:focus,
div.form textarea:focus {
	outline: none;
	border-color: #5A90CC;
	box-shadow: 0 0 0 3px rgba(90, 144, 204, .3);
}

div.form input[type=checkbox] { width: auto; margin: 0 6px 0 0; vertical-align: middle; }
div.form input[type=file] { margin: 4px 0; }

div.form input[type=submit],
.buttons-row input[type=submit],
.admin-toolbar input[type=submit] {
	padding: 8px 18px;
	border: 1px solid #204f8d;
	border-radius: 4px;
	background: #204f8d;
	color: #fff;
	font: bold 13px 'PT Sans', Helvetica, sans-serif;
	letter-spacing: .5px;
	cursor: pointer;
}
div.form input[type=submit]:hover,
.buttons-row input[type=submit]:hover,
.admin-toolbar input[type=submit]:hover { background: #5A90CC; border-color: #5A90CC; }
div.form input[type=submit]:focus-visible,
.buttons-row input[type=submit]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(90, 144, 204, .45); }

div.form .errorMessage { margin-top: 4px; }
div.form .hint { margin-top: 4px; font-size: 12px; }
div.form .errorSummary { margin-bottom: 20px; }
div.form .turnstile { margin-top: 4px; }

/* Admin search box sits in a toolbar, not a .form */
.admin-toolbar input[type=search], .admin-toolbar select {
	padding: 6px 8px; border: 1px solid #b8c2cc; border-radius: 4px; font: 13px 'PT Sans', Helvetica, sans-serif;
}
.admin-toolbar input[type=search]:focus, .admin-toolbar select:focus {
	outline: none; border-color: #5A90CC; box-shadow: 0 0 0 3px rgba(90, 144, 204, .3);
}