/* Tactics Forms -- neutral styling that sits inside the site's own form box. */
.tf-form { --tf-accent: #d61f26; --tf-border: #cfd4da; --tf-radius: 22px; width: 100%; box-sizing: border-box;
	background: #fff; color: #222; padding: 18px 20px 22px; border-radius: 0 0 8px 8px; position: relative; text-align: left; }
.tf-form label, .tf-form p, .tf-form .tf-required-note { color: #222; }
.tf-form .tf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tf-form .tf-required-note { font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.tf-form .tf-field { margin: 0 0 14px; }
.tf-form label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.tf-form .tf-req { color: var(--tf-accent); }
.tf-form input[type="text"],
.tf-form input[type="email"],
.tf-form input[type="tel"],
.tf-form input[type="date"],
.tf-form textarea {
	width: 100%; box-sizing: border-box; padding: 10px 16px; font-size: 15px; line-height: 1.4;
	border: 1px solid var(--tf-border); border-radius: var(--tf-radius); background: #fff; color: #222;
}
.tf-form textarea { border-radius: 16px; min-height: 120px; resize: vertical; }
.tf-form input:focus, .tf-form textarea:focus { outline: 2px solid var(--tf-accent); outline-offset: 1px; border-color: var(--tf-accent); }
.tf-form .tf-invalid { border-color: var(--tf-accent) !important; background: #fff6f6; }
.tf-form input[type="file"] { width: 100%; font-size: 14px; }
.tf-form .tf-help { font-size: 12px; color: #555; margin: 6px 0 0; }
.tf-form .tf-min { font-size: 13px; font-weight: 700; margin: 4px 0 12px; }
.tf-form .tf-alert { background: #fdecea; color: #8a1c1c; border: 1px solid #f5c2c0; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.tf-form .tf-alert[hidden] { display: none; }
.tf-form .tf-submit {
	display: inline-block; background: var(--tf-accent); color: #fff; border: 0; border-radius: var(--tf-radius);
	padding: 12px 28px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.tf-form .tf-submit:hover { filter: brightness(0.92); }
.tf-form .tf-submit[disabled] { opacity: .6; cursor: wait; }

/* Labels shown only to screen readers (placeholder layout). */
.tf-form .tf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tf-form .tf-success { font-size: 15px; font-weight: 700; padding: 14px 0; }

/* look="nf": same look as the Ninja Forms forms on embroiderytactics.co.za (measured 2026-10-31):
   pill boxes 46px high with a thin black border, rounded message box, black SUBMIT button. */
.tf-form.tf-look-nf { background: transparent; padding: 0; border-radius: 0; color: inherit; font: inherit; letter-spacing: inherit; }
.tf-look-nf .tf-required-note { display: none; }
.tf-look-nf .tf-field { margin: 0 0 25px; }
.tf-look-nf label { font-size: 15px; font-weight: 500; line-height: 24px; color: #000; margin: 0 0 10px; }
.tf-look-nf .tf-req { color: #e80000; font-weight: 600; }
.tf-look-nf input[type="text"],
.tf-look-nf input[type="email"],
.tf-look-nf input[type="tel"],
.tf-look-nf input[type="date"] {
	height: 46px; padding: 10px 20px; border: 1px solid #000; border-radius: 100px; background: #fff; color: #4a5568;
	font-family: inherit; font-size: 15px; line-height: 24px; letter-spacing: 1px; box-shadow: none;
}
.tf-look-nf textarea {
	height: 90px; min-height: 90px; padding: 20px; border: 1px solid #000; border-radius: 50px; background: #fff; color: #000;
	font-family: inherit; font-size: 15px; line-height: 24px; letter-spacing: 1px; box-shadow: none;
}
.tf-look-nf input::placeholder, .tf-look-nf textarea::placeholder { color: #4a5568; opacity: 1; }
.tf-look-nf input:focus, .tf-look-nf textarea:focus { outline: none; border-color: #000; box-shadow: 0 0 0 1px #000; }
.tf-look-nf .tf-invalid { border-color: #e80000 !important; background: #fff; }
.tf-look-nf .tf-submit {
	background: #000; color: #fff; border: 0; border-radius: 50px; padding: 10px 30px; height: 44px; line-height: 24px; width: 130px; /* Essential Addons' default button width */
	font-family: inherit; font-size: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px;
}
.tf-look-nf .tf-submit:hover { filter: none; background: #fff; color: #000; } /* as the site's Additional CSS did for the NF buttons */
.tf-look-nf .tf-alert { border-radius: 20px; }
.tf-look-nf .tf-success { color: #000; }
.tf-look-nf.tf-layout-placeholder label { font-weight: 700; } /* the one visible label there (date) is bold, like before */

/* Desktop: the site's Additional CSS made the one-line boxes 540px wide (the message box stays full width). */
@media (min-width: 981px) {
	.tf-look-nf input[type="text"],
	.tf-look-nf input[type="email"],
	.tf-look-nf input[type="tel"],
	.tf-look-nf input[type="date"] { width: 540px; max-width: 100%; }
}

/* btn="theme": the theme's own button (gold, black on hover), as the Contact form had (measured 2026-10-31). */
.tf-look-nf.tf-btn-theme .tf-submit {
	background: var(--global-palette-btn-bg, #cc9933); color: var(--global-palette-btn, #fff); border: 0; border-radius: 3px;
	padding: 10px 20px; height: auto; font-family: inherit; font-size: 18px; line-height: 1.6; font-weight: 400;
	letter-spacing: 1px; text-transform: none; box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
}
.tf-look-nf.tf-btn-theme .tf-submit:hover {
	background: var(--global-palette-btn-bg-hover, #000); color: var(--global-palette-btn-hover, #fff);
	box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------------
   Template forms (1.3.0, [tactics_form id="..."]): the fields carry the same class names Contact Form 7 used, so the
   theme and the site's Additional CSS style them exactly as before. Only the extras are styled here.
   ------------------------------------------------------------------ */
.tf-tpl-form { position: relative; }
.tf-tpl-form .tf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tf-tpl-form .tf-alert { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #ffb900; }
.tf-tpl-form .tf-alert.tf-alert-ok { border-color: #46b450; }
.tf-tpl-form .tf-alert[hidden] { display: none; }
.tf-tpl-form .tf-invalid { border-color: #dc3232 !important; }
.tf-tpl-form .tf-drop-input { display: none; }

/* Drag & drop box: same size and look as the old "Drag & Drop Files Here" box (measured 2026-10-31). */
.tf-drop { display: block; position: relative; border: 2px dashed #c5c5c5; border-radius: 5px; margin-bottom: 10px; }
.tf-drop.tf-over { border-color: #8a8a8a; background: rgba(0, 0, 0, 0.02); }
.tf-drop.tf-invalid { border-color: #dc3232 !important; }
.tf-drop-inner { display: block; padding: 15px 20px; text-align: center; }
.tf-drop-title { display: block; margin: 0 0 10px; font-size: 20px; line-height: 30px; font-weight: 400; color: #2d3748; }
.tf-drop-btn { display: block; }
.tf-drop-browse { text-decoration: none; }
.tf-drop-count { position: absolute; right: 5px; bottom: 3px; font-size: 12px; line-height: 1.6; }
.tf-drop-list { display: block; }
.tf-drop-list[hidden] { display: none; }
.tf-drop-file { display: flex; align-items: center; gap: 12px; padding: 4px 0 8px; font-size: 14px; }
.tf-drop-remove { color: #dc3232; text-decoration: none; font-size: 20px; line-height: 1; }