/* ==========================================================================
   Checkout skin, Front Page (V5) look.

   Loaded by headerCheckout.php after style.css and checkout-responsive.css,
   so it wins ties on specificity. Presentation only: it restyles the shared
   checkout markup (secure-order heading, .entry-title section banners,
   labels, .form-control fields, the pay button) without touching layout
   mechanics the payment scripts rely on (no heights on hosted-field
   containers, no display changes on form elements).

   The !important flags exist because the section banners and the pay button
   carry inline style attributes / an in-body <style> block in the
   templates, which this file must outrank without editing form markup.
   ========================================================================== */

:root {
	--ckv5-navy-400: #4b7fc0;
	--ckv5-navy-600: #164575;
	--ckv5-navy-800: #0e2b4b;
	--ckv5-navy-900: #0a2038;
	--ckv5-gold-400: #f7c53c;
	--ckv5-gold-500: #f0b323;
	--ckv5-gold-600: #d99a10;
	--ckv5-gray-0:   #ffffff;
	--ckv5-gray-50:  #f5f7fa;
	--ckv5-gray-100: #eaeef3;
	--ckv5-gray-200: #dbe1e9;
	--ckv5-gray-300: #c2cbd6;
	--ckv5-gray-600: #4f5a69;
	--ckv5-gray-700: #3a434f;
	--ckv5-gray-800: #252c36;
	--ckv5-red:      #cc2929;
	--ckv5-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, "Noto Sans", sans-serif,
	             "Apple Color Emoji", "Segoe UI Emoji";
}

body {
	background: var(--ckv5-gray-50);
	color: var(--ckv5-gray-800);
	font-family: var(--ckv5-font);
	line-height: 1.55;
}

/* --- Header bar (markup in headerCheckout.php) ------------------------- */

.ckv5-header {
	background: var(--ckv5-gray-0);
	border-bottom: 1px solid var(--ckv5-gray-200);
}

.ckv5-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 12px 16px;
}

.ckv5-brand {
	display: block;
	line-height: 0;
}

.ckv5-brand img {
	width: 200px;
	max-width: 46vw;
	height: auto;
}

.ckv5-secure {
	margin: 0;
	color: var(--ckv5-gray-600);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.ckv5-secure svg {
	vertical-align: -2px;
	margin-right: 4px;
}

/* --- Content card ------------------------------------------------------ */

#content {
	background: var(--ckv5-gray-0);
	border: 1px solid var(--ckv5-gray-200);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(10, 32, 56, 0.08), 0 1px 2px rgba(10, 32, 56, 0.04);
	padding: clamp(16px, 4vw, 32px);
	margin-top: 24px !important;
	margin-bottom: 40px !important;
}

#content h1 {
	margin: 0 0 12px;
	color: var(--ckv5-navy-900);
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* --- Section banners ---------------------------------------------------
   The templates paint these inline (background-color:#359, Helvetica,
   italic). Repaint them as V5 navy bars. */

h2.entry-title {
	background-color: var(--ckv5-navy-600) !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	padding: 10px 14px !important;
}

h2.entry-title em {
	font-style: normal;
}

h2.entry-title img {
	vertical-align: middle;
	max-height: 24px;
	width: auto;
}

/* --- Order summary tables ---------------------------------------------- */

#content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

#content table td {
	padding: 6px 4px;
	border: none;
	vertical-align: top;
}

/* --- Form fields --------------------------------------------------------
   Colors and corners only. Heights and display are left to the existing
   stylesheets because the Braintree hosted-field containers are sized by
   them. */

#content label {
	color: var(--ckv5-gray-700);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

#content .form-control,
#content select {
	border: 1px solid var(--ckv5-gray-300);
	border-radius: 8px;
	background-color: var(--ckv5-gray-0);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#content .form-control:focus,
#content .form-control:focus-within,
#content select:focus {
	border-color: var(--ckv5-navy-400);
	box-shadow: 0 0 0 3px rgba(75, 127, 192, 0.2);
	outline: none;
}

#content .invalid-feedback {
	color: var(--ckv5-red);
	font-size: 0.85rem;
}

.payment-errors {
	color: var(--ckv5-red) !important;
}

/* --- Pay button ---------------------------------------------------------
   Matches the sales page buy button (gold on navy). Outranks the in-body
   <style> block that paints it green. */

#paymentbutton,
button.btn-lg {
	background: var(--ckv5-gold-500) !important;
	border: 1px solid var(--ckv5-gold-600) !important;
	border-radius: 999px !important;
	color: var(--ckv5-navy-900) !important;
	font-family: inherit !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	padding: 0.9em 1.5em !important;
	box-shadow: 0 6px 16px rgba(217, 154, 16, 0.32);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

#paymentbutton:hover,
button.btn-lg:hover {
	background: var(--ckv5-gold-400) !important;
	transform: translateY(-1px);
}

/* --- Footer (markup in footerCheckout.php) ------------------------------ */

.ckv5-footer {
	margin: 0 auto;
	padding: 24px 16px 40px;
	max-width: 1000px;
	text-align: center;
	color: var(--ckv5-gray-600);
	font-size: 0.875rem;
}

.ckv5-footer p {
	margin: 0 0 6px;
}