﻿/* ============================================================
   FORM STYLES â€” refined to match the TICA NW site design
   (blue/navy header palette, gold headings, rounded cards)
   ============================================================ */

.ctr {
	text-align: center;
}
.smltxt {
	font-size: small;
	color: #5a6b85;
}
.hidden {
	visibility: hidden;
}

.version-num {
	color: #c3cce0;
	font-style: normal;
	font-size: x-small;
	font-weight: normal;
	text-align: center;
}

/* ============================================================
   FIELD CONTROLS
   ============================================================ */
.control_txt {
	background-color: #f5f7fb;
	border: 1px solid #c9d2e3;
	border-radius: 6px;
	padding: 8px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	color: #333;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.control_txt:focus {
	background-color: #fff;
	border-color: #18417e;
	box-shadow: 0 0 0 3px rgba(24, 65, 126, 0.15);
	outline: none;
}

input:focus,
textarea:focus,
select:focus {
	border: 1px solid #18417e;
	box-shadow: 0 0 0 3px rgba(24, 65, 126, 0.15);
	outline: none;
}

.control_asterisk {
	font-weight: bold;
	font-size: x-large;
	color: #BB320B;
	vertical-align: middle;
}

.control_error,
.errormessage {
	display: inline-block;
	color: #BB320B;
	font-weight: bold;
	font-size: 0.85rem;
	margin: 4px 0;
	font-style: italic;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.control_button,
.button {
	display: inline-block;
	margin: 10px 0;
	padding: 12px 32px;
	background-color: #CC0000;
	background-image: linear-gradient(180deg, #d6342f 0%, #b81c1c 100%);
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: none;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.control_button:hover,
.button:hover {
	background-color: #a61717;
	background-image: linear-gradient(180deg, #c22a25 0%, #9c1414 100%);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.control_button:active,
.button:active {
	transform: translateY(1px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.control_total {
	font-weight: bold;
	background-color: #FFFF99;
}

.control_total_zero {
	font-weight: bold;
	background-color: #FFFFFF;
}

/*=============
form styles
==============*/
form fieldset {
	padding: 1.5em;
	border: 1px solid #d8dee9;
	width: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background-color: #fff;
	margin-bottom: 1.5em;
}
form fieldset label {
	width: 25%;
	margin-right: 0.5em;
	padding-top: 0.2em;
	font-weight: bold;
	color: #18417e;
}
form fieldset legend {
	padding: 0.3em 0.9em;
	color: #fff;
	background-color: #18417e;
	border-radius: 4px;
	text-align: left;
	font-weight: bold;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cf {
	border: 1px #353c48 solid;
	background-image: url('../images/form-bg.jpg');
	background-repeat: repeat;
}

.indent {
	padding-left: 20px;
}
.indent2 {
	padding-left: 40px;
}
.indent3 {
	left: 200px;
	white-space: normal;
}
.indent-after {
	float: left;
	width: 5em;
}

/* ============================================================
   FORM LAYOUT HELPERS
   (additive â€” used to give the nomination form a cleaner,
   card-based rhythm without altering any control logic)
   ============================================================ */
.form-section {
	background-color: #fff;
	border: 1px solid #d8dee9;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem 0;
}
.form-section h2 {
	margin: 0 0 1rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #C6CDE5;
	color: #18417e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.02em;
}
.form-field {
	margin-bottom: 1.1rem;
}
.form-field:last-child {
	margin-bottom: 0;
}
.form-field > label,
.form-field > .form-label {
	display: block;
	font-weight: bold;
	color: #18417e;
	margin-bottom: 0.35rem;
}
.form-field .smltxt {
	display: block;
	margin: 0.25rem 0 0.5rem 0;
}
.required-flag {
	color: #18417e;
	font-style: italic;
	font-weight: normal;
	font-size: 0.85em;
}

.captcha-box {
	background-color: #FFFFFF;
	border: 1px solid #d8dee9;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	text-align: center;
}
.captcha-box p {
	margin: 0 0 0.5rem 0;
	font-weight: bold;
	color: #18417e;
}

.form-actions {
	text-align: center;
	margin-top: 1.5rem;
}

.confirmation-box {
	border: 1px solid #d8dee9;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background-color: #f5f7fb;
	padding: 1.25rem 1.5rem;
	margin: 1rem 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
	form fieldset label {
		width: 100%;
		display: block;
	}
	.control_txt,
	textarea.control_txt,
	select.control_txt {
		width: 100% !important;
	}
}
