/* Veterans/Submit.ashx -- additions to /Login.css (which supplies .AuthCard, LABEL, INPUT, .AuthBtn ...) */

/* The guest book card is a little wider than the login card: it has a message box */
#Vet .AuthCard { max-width: 560px; }

/* SELECT and TEXTAREA look like the text inputs in Login.css */
.AuthCard SELECT,
.AuthCard TEXTAREA {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	background-color: #1E1E1E;
	border: 1px solid #4C4C4C;
	border-radius: 5px;
	color: #FFF;
	font: 14pt 'PT Sans', sans-serif;
}
.AuthCard TEXTAREA {
	min-height: 180px;
	line-height: 1.4;
	resize: vertical;
}
.AuthCard SELECT { cursor: pointer; }
.AuthCard SELECT OPTION { background-color: #1E1E1E; color: #FFF; }
.AuthCard SELECT:focus,
.AuthCard TEXTAREA:focus {
	outline: none;
	border-color: #728242;
	background-color: #232323;
}
.AuthCard SELECT.FieldError,
.AuthCard TEXTAREA.FieldError { border-color: #A6453F; }

/* Year + years side by side */
.VetRow {
	display: flex;
	gap: 16px;
}
.VetRow > DIV { flex: 1 1 0; min-width: 0; }

/* Required marker */
.VetReq { color: #FF9D9D; }

/* Checkbox line: normal text, not the upper-case field label */
.AuthCard LABEL.VetCheck {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0 6px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13pt;
	cursor: pointer;
}
.AuthCard LABEL.VetCheck INPUT {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #2196F3;
	cursor: pointer;
}

/* Character counter turns red past the limit (Submit.js) */
#VetCount.Over { color: #FFB3AD; }

/* Honeypot field: off-screen, not display:none (some bots skip hidden fields) */
.VetHp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A link that looks like .AuthBtn */
A.VetBtnLink {
	width: max-content;
	text-align: center;
	text-decoration: none;
}

/*---------------------------------------------------------------------------------------------
   Optional photo + square cropper (Submit.js). The block stays hidden until Submit.js runs,
   because without JavaScript a picture can't be cropped or sent.
---------------------------------------------------------------------------------------------*/
.VetPhoto { display: none; margin-top: 6px; }
.VetPhoto.Ready { display: block; }
.VetOpt { color: #999; text-transform: none; letter-spacing: 0; }

/* The real file input is invisible; the "Choose a picture" / "Change" labels open it */
.VetFile {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.VetPickArea, .VetCropper, .VetPreview { display: none; }
.VetPhoto.empty   .VetPickArea { display: block; }
.VetPhoto.crop    .VetCropper  { display: block; user-select: none; -webkit-user-select: none; }
.VetPhoto.preview .VetPreview  { display: flex; align-items: center; gap: 18px; }

/* Small secondary buttons (also used on LABELs, so undo the upper-case field label style) */
.AuthCard .VetSmallBtn {
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 6px 14px;
	background-color: #1E1E1E;
	border: 1px solid #4C4C4C;
	border-radius: 5px;
	color: #FFF;
	font: 12pt 'PT Sans', sans-serif;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.AuthCard .VetSmallBtn:hover { border-color: #728242; background-color: #232323; }
.AuthCard .VetSmallBtn.VetPrimary { background: linear-gradient(to bottom, #03A9F4, #2196F3); border-color: #2196F3; }
.AuthCard .VetSmallBtn.VetPrimary:hover { filter: brightness(1.12); }
.VetFile:focus + .VetPickArea .VetSmallBtn { border-color: #728242; }
.VetBtns { margin-top: 10px; }

/* Cropper: the picture fits the card; the square box dims everything outside it.
   The corner handles sit inside the box, so they aren't cut off at the picture's edges. */
.VetCropStage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	overflow: hidden;
	border-radius: 5px;
	user-select: none;
	-webkit-user-select: none;
}
.VetCropStage IMG {
	display: block;
	max-width: 100%;
	max-height: 60vh;
	pointer-events: none;
}
.VetCropBox {
	position: absolute;
	box-sizing: border-box;
	border: 2px solid #FFF;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
	cursor: move;
	touch-action: none;
}
.VetHandle {
	position: absolute;
	width: 16px;
	height: 16px;
	background-color: #FFF;
	border: 1px solid #333;
	border-radius: 3px;
	touch-action: none;
}
.VetHandle.nw { left: -2px;   top: -2px;    cursor: nwse-resize; }
.VetHandle.ne { right: -2px;  top: -2px;    cursor: nesw-resize; }
.VetHandle.sw { left: -2px;   bottom: -2px; cursor: nesw-resize; }
.VetHandle.se { right: -2px;  bottom: -2px; cursor: nwse-resize; }

/* Chosen picture */
.VetPreview IMG {
	width: 140px;
	height: 140px;
	border: 1px solid #4C4C4C;
	border-radius: 5px;
	object-fit: cover;
}
.VetPreview .VetBtns { margin-top: 0; }

.VetPhotoErr { color: #FFB3AD; }

@media (pointer: coarse) {
	/* bigger corners for fingers */
	.VetHandle { width: 24px; height: 24px; }
	.VetHandle.nw { left: -2px;  top: -2px; }
	.VetHandle.ne { right: -2px; top: -2px; }
	.VetHandle.sw { left: -2px;  bottom: -2px; }
	.VetHandle.se { right: -2px; bottom: -2px; }
}

@media (max-width: 480px) {
	.VetRow { gap: 10px; }
	.VetPreview IMG { width: 110px; height: 110px; }
}

/*---------------------------------------------------------------------------------------------
   Edit mode: "Delete This Record" and the confirmation page
---------------------------------------------------------------------------------------------*/
.VetDelete {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid #333;
}
.AuthCard .VetSmallBtn.VetDangerSmall { color: #FFB3AD; border-color: #A6453F; }
.AuthCard .VetSmallBtn.VetDangerSmall:hover { background-color: #3A1F1F; border-color: #D0574F; }

.AuthBtn.VetDanger { background: linear-gradient(to bottom, #C8524A, #A6453F); }

.VetDelWhat {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0 6px;
	font-size: 13pt;
	overflow-wrap: anywhere;
}
.VetDelWhat IMG {
	width: 90px;
	height: 90px;
	flex: 0 0 auto;
	border: 1px solid #4C4C4C;
	border-radius: 5px;
}

/* Two or three links in a row at the bottom of a card */
.AuthCard A.AuthLink + A.AuthLink { margin-left: 18px; }