/*
Theme Name: Credicorp
Theme URI: https://credicorp.co.uk/
Author: Credicorp
Description: The Credicorp theme — a classic 960px corporate WordPress layout for credicorp.co.uk, with a responsive mobile layer, collapsible navigation and site search. Includes templates for the home page, content pages, contact, payments and Newsroom articles, a Support Articles knowledge base, topic-grouped FAQ accordions, fourteen built-in customer request forms, an office map, and the Credicorp Business Bridging Loan product (marketing page, calculator, multi-step application with document upload, and a customer portal).
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccfs
*/

@charset "utf-8";

/* =====================================================================
   1. ORIGINAL SITE STYLES  (ported from the original stylesheet, paths rewritten)
   ===================================================================== */

/* ========== RESET/GLOBAL ========== */

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, pre,

dd, dl, dt, a, cite, code, img, tt, legend, fieldset, label {margin: 0; padding: 0; text-align:left;}

img, a img, form, fieldset {border: 0;}

html, body 		{height: 100%;}

/*Opera Fix*/

body:before		{

				content:"";

				height:100%;

				float:left;

				width:0;

				margin-top:-32767px;/

				}

body			{

				font-size:12px;

				font-family:Arial, Helvetica, sans-serif;

				line-height:1.3em;

				color:#586b77;

				background:#fff;

				}

body#main #container	{font-size:14px;}


a				{

				color:#90CB22;

				text-decoration:underline;

				}

a:hover 		{

				text-decoration:none;

				color:#37424A;

				}

p				{

				margin:0 0 1.5em 0;

				padding:0;

				}

small			{font-size:0.8em;}

h1				{

				font: 60px Arial, Helvetica, sans-serif;

				color:#37424a;

				}

h2				{

				font: 20px Arial, Helvetica, sans-serif;

				line-height:24px;

				color:#90CB22;

				}

h3				{

				font: bold 16px Arial, Helvetica, sans-serif;

				color:#586b77;

				margin-bottom:1em;

				}

.column_wide h3 a {

	color: #90CB22;

}

.column_wide h3 a:hover {

	color: #586b77;

}


h4				{

				font: bold 14px Arial, Helvetica, sans-serif;

				color:#37424a;

				margin-bottom:15px;

				}

h5				{

				font: bold 13px Arial, Helvetica, sans-serif;

				color:#292929;

				margin-bottom:5px;

				}

h6				{

				font: bold 12px Arial, Helvetica, sans-serif;

				color:#292929;

				margin-bottom:5px;

				}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a	{

				color:#292929;

				text-decoration:none;

				}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover	{

				color: #bca474;

				text-decoration:none;

				}


ul				{

				margin:0;

				padding:0 0 20px;

				list-style:none;

				}


ul li			{

				margin:0;

				padding:0;

				}

ol ol li		{list-style-type: lower-alpha;}


pre				{

				font:normal 12px/22px Arial, Helvetica, sans-serif;

				color:#000;

				padding:11px;

				border:1px solid #caccc7;

				background:#f5f5f3;

				}


.code			{

				display:block;

				font:normal 10px/12px Arial, Helvetica, sans-serif;

				margin-top:10px;

				}

address			{

				padding-bottom:20px;

				font-style:normal;

				}

hr				{

				display:block;

				height:1px !important;

				overflow:hidden;

				clear:both;

				border:none;

				background:#caccc7;

				margin:20px 0;

				}


				

td {


	vertical-align: top;

}


/* ---- Default Form Elements ---- */

input, select, textarea	{

				width:auto;

				padding:4px 5px;

				font-size:12px;

				font-family:Arial, Helvetica, sans-serif;

				color:#333331;

				background:none;

				border:1px solid #333331;

				}


input[type=text]{height:16px;}

select			{padding:2px;}

textarea		{overflow:hidden;resize:none;}


input[type=text]:hover, textarea:hover	{}

input[type=text]:focus, textarea:focus	{}

input[type=submit],

input.submit	{

				width:auto;

				position:relative;

				padding:5px 12px;

				cursor:pointer;

				outline:none;

				font-size:12px;

				font-weight:bold;

				font-style:italic;

				text-align:center;

				color:#bca474;

				border:none;

				background: transparent;

				}


input[type=submit]:hover,

input[type=submit]:focus	{

				color:#292929;

				}

/* ========== GENERAL STRUCTURE ========== */

/* ---- Top Area ---- */

.top_full		{

				width:100%;

				position:relative;

				}

#top			{

				width:960px;

				min-height:90px;

				position:relative;

				margin:0 auto;

				}

/* -- logo -- */

a.logo			{

				padding-top:26px;

				padding-left:13px;

				display:block;

				outline:none;

				}

.logo_pos{

	float: left;	

}

.search_pos{

	float: left;

	padding-left:490px;

	padding-top:35px;	

}

.search_bg_grey_padding{

	padding: 27px;	

}

.search_padding{

	padding: 20px;

	width: 758px;	

}

.search_padding_2{

	padding-left: 20px;

	width: 738px;

}

.search_padding_2 ol{

	margin: 0;

	font-size: 14px;

	font-weight:bold;

	color:#90CB22;	

}

.search_padding_2 ol li{

	padding-top: 10px;

}

.search_padding_2 ol  .normaltext{

	font-size: 12px;

	color:#344048;	

	text-decoration: none;

}

.normaltext:hover{

	color:#90CB22;	

	text-decoration: none;

}

.linktext{

	font-size: 12px;

	color:#90CB22;	

	text-decoration: none;

}

.linktext:hover{

	color:#344048;	

	text-decoration: none;

}

.searchinput{

	border:0px solid #fff; 

	color:#000;

}

.searchinput:hover{

	border:0px solid #fff; 

	color:#000;

}

.search_input{

	padding-top: 2px;

	float: left;

	width: 143px;	

}

.search_input_button{

	float: left;	

}

.search_submit{

	padding: 0;

	border: 0;	

}

.pagenumbers_container{

	border: 0px solid red;

	width: 758px;

	float: left;	

}

.clr{

	clear: left;	

}

.pagenumbers{

	font-size: 12px;

	color:#344048;

	float: right;	

}

/* ---- Main Menu ---- */

.nav_full		{

				width:100%;

				background:url(images/menu_px.gif) center top repeat-y;

				}


#nav			{

				width:960px;

				margin:0 auto;

				position:relative;

				z-index:50;

				background:#374249;

				}


.menu			{

				margin:0;

				padding:0;

				list-style:none;

				}


.menu li		{

				margin:0 1px 0 0;

				padding:0;

				float:left;

				font-family:Arial, Helvetica, sans-serif;

				font-size:18px;

				}


.menu li a		{

				color:#fff;

				text-decoration:none;

				display:block;

				padding:8px 18px;

				}


.menu li a:hover,

.menu li a.active{

				color:#fff;

				text-decoration:none;

				background:#1f272b;

				}

/* ---- Header Slider ---- */

.header_full	{

				width:100%;

				background:url(images/head_bg.png) center bottom no-repeat;

				}				

#header			{

				width:960px;

				height:300px;

				margin:0 auto;

				position:relative;

				z-index:10;

				background:#fff;

				}				

#header_sub		{

				width:960px;

				height:200px;

				margin:0 auto;

				position:relative;

				background:#fff;

				}

#header_sub h1	{

				position:absolute;

				bottom:5px;

				left:20px;

				}

/* ---- Content / Layout ---- */


.container_full	{

				width:100%;

				position:relative;

				background:url(images/content_px.gif) center top repeat-y;

				}


#container		{

				width:960px;

				min-height:420px;

				height: 100% auto;

				display:table;

				margin:0 auto;

				background-color: #fff;

				}


#main #container,

#sp #container	{

				background-image:url(images/cont_bg.gif);

				background-position: bottom;

				background-repeat: repeat-x;

				}


/* ---- FOOTER SIDEBAR ---- */

#fsb			{

				width:940px;

				min-height:45px;

				margin:0 auto;

				padding:20px 0 20px 20px;

				}

#main #fsb		{

				width:920px;

				padding:38px 20px;

				}


/* ---- FOOTER ---- */

.footer_full	{

				width:100%;

				background:url(images/foot_px.gif) center top repeat-y;

				}

#footer			{

				width:920px;

				min-height:180px;

				margin:0 auto;

				padding:25px 20px;

				font-size:12px;

				line-height:15px;

				color:#586b77;

				background:#eef1f4;

				}


#footer a		{

				color:#586b77;

				text-decoration:none;

				}


#footer a:hover	{

				color:#90CB22;

				text-decoration:none;

				}


#footer .column {

				width:162px;

				margin-right:20px;

				float:left;

				}


#footer .column li {

				margin:0 0 5px;

				padding:0 0 0 8px;

				background:url(images/arr2.png) 0 4px no-repeat;

				}


#footer .copy	{float:right;}


/* ========== PAGES STYLES&LAYOUTS ========== */

.column1		{

				width:344px;

				padding:33px 20px;

				float:left;

				position:relative;

				z-index:50;

				}

.column2		{

				width:267px;

				padding:33px 10px;

				float:left;

				position:relative;

				}

.column3		{

				width:269px;

				padding:33px 10px;

				float:left;

				position:relative;

				}

.column4		{

				width:172px;

				padding:33px 10px;

				float:left;

				position:relative;

				}

.column5		{

				width:374px;

				padding:33px 0 33px 10px;

				float:left;

				position:relative;

				}

.column6		{

				width:546px;

				padding:33px 20px;

				float:left;

				position:relative;

				}

.column_wide	{

				width:920px;

				padding:20px;

				position:relative;

				}


/* ---- Home Page ---- */

.box1, .box2, .box3 {

				font-size:34px;

				line-height:34px;

				font-family:Arial, Helvetica, sans-serif;

				}

.box1			{

				width:344px;

				height:76px;

				padding:12px 20px;

				overflow:hidden;

				float:left;

				color:#fff;

				background:url(images/px1.gif) top left repeat-y #90CB22;

				}

.box2			{

				width:267px;

				height:76px;

				padding:12px 10px;

				overflow:hidden;

				float:left;

				color:#90CB22;

				background:url(images/px2.gif) top left repeat-y #586a76;

				}

.box3			{

				width:269px;

				height:76px;

				padding:12px 10px;

				overflow:hidden;

				float:left;

				color:#37424a;

				background:url(images/px3.gif) top left repeat-y #eff2f4;

				}

.contact_footer	{

				float:right;

				font-family:Arial, Helvetica, sans-serif;

				font-size:34px;

				line-height:34px;

				padding:6px 0 0 0;

				}

.green			{color:#90CB22;}

a.contact_us	{

				width:220px;

				height:44px;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/contact_us_btn.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.contact_us	{background-position:0 -44px;}

/* ---- About Page ---- */

#fsb .column1	{

				width:192px;

				margin-right:20px;

				padding:0;

				float:left;

				}


.hover_box		{

				width:160px;

				height:180px;

				display:block;

				position:relative;

				float:left;

				padding:14px;

				overflow:hidden;

				border:1px solid #dee0e3;

				}


a.hover_box		{

				color:#586b77;

				text-decoration:none;

				}


.last_box		{margin-left:-1px;}


.hover_box:hover	{border:1px solid #90CB22; z-index:100;}

.hover_box:hover:before,

.hover_box:hover .before	{

				content:' ';

				before:' ';

				width:186px;

				height:206px;

				position:absolute;

				z-index:-1;

				top:0;

				left:0;

				border:1px solid #90CB22;

				}

.hover_box b	{

				display:block;

				font-size:14px;

				color:#90CB22;

				}

#fsb .thumb		{

				width:158px;

				height:118px;

				display:block;

				overflow:hidden;

				border:1px solid #dee0e3;

				margin-bottom:6px;

				}

#fsb .column2	{

				width:auto;

				margin-right:20px;

				padding:0;

				float:left;

				}

#fsb .column22	{

				width:auto;

				margin-right:10px;

				padding:0;

				float:left;

				}

#fsb .column3	{

				width:auto;

				padding:0;

				float:left;

				}


/* ---- Payment Page ---- */

a.process_credit_card	{

				width:225px;

				height:44px;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/precess_credit_card.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.process_credit_card	{background-position:0 -46px;}

.get_back_box	{

				width:290px;

				float:left;

				margin-right:20px;

				}

.get_back_box h2	{

				color:#37424a;

				margin-bottom:20px;

				}

.get_back_box h2.smaller	{

				font-size:18px;

				line-height:22px;

				}

.auto_loan_box	{

    width:225px;

    float:left;

    margin-right:20px;

}

.auto_loan_box h2	{

    color:#37424a;

    margin-bottom:20px;

}

.auto_loan_box h2.smaller	{

    font-size:18px;

    line-height:22px;

}

/* ---- Online Calculator ---- */

.calculator		{

				width:354px;

				margin-bottom:25px;

				}

.calc_body		{

				padding:8px 12px;

				background:#e2e3e4;

				border-radius:0 0 5px 5px !important;

				-moz-border-radius:0 0 5px 5px !important;

				-khtml-border-bottomleft-radius:5px !important;

				-khtml-border-bottomright-radius:5px !important;

				-webkit-border-radius:0 0 5px 5px !important;

				}

.calc_body p	{

				margin:0 0 8px;

				padding:0 0 8px;

				display:block;

				position:relative;

				*position:static;

				z-index:100;

				border-bottom:1px solid #c9cacc;

				}

.calc_body p.last	{

				margin:0;

				padding:0;

				border-bottom:none;

				}

.calc_body p.last:after,

.calc_body p.last.after	{

				border-bottom:none;

				}

.calc_body p:after,

.calc_body p.after	{

				width:100%;

				content:"";

				position:absolute;

				left:0;

				bottom:-2px;

				border-bottom:1px solid #f1f1f1;

				}

.calc_body .row	{margin:0 0 8px;}

.calc_body label	{

				font-weight:bold;

				padding:4px 0 0;

				float:left;

				}

.calc_body span.right	{

				width:175px;

				float:right;

				}

.calc_body input[type=text],

.calc_body select	{

				width:160px;

				color:#586b77;

				background:#fff;

				}

.calc_body span.dollar	{

				width:175px;

				display:block;

				position:relative;

				}

.calc_body span.dollar:before,

.calc_body span.dollar.before	{

				content:"$";

				font-weight:bold;

				position:absolute;

				left:-1em;

				top:4px;

				}


#week, #month, #fort{background:#fff; padding:4px 5px; width:160px; border:1px solid #586b77; color:#586b77; margin-right:3px;}

/* ========== STYLED ELEMENTS ========== */

.clear			{

				display:block;

				clear:both;

				height:0 !important;

				overflow:hidden;

				}

.alignleft		{float:left;}

.alignright		{float:right;}

.aligncenter	{

				width:auto;

				display:block;

				margin:0 auto;

				}

.alignleft 		{

				margin-right:10px;

				margin-bottom:5px;

				}


.alignright		{

				margin-left:10px;

				margin-bottom:5px;

				}

.aligncenter	{margin:0 auto 10px;}

a.more			{

				display:inline-block;

				height:17px;

				padding-right:22px;

				font-weight:bold;

				color:#90CB22;

				text-decoration:none;

				background:url(images/arr.png) 100% 0 no-repeat;

				}

a:hover.more	{

				color:#374249;

				text-decoration:none;

				}


/* ---- Breadcrumbs ----
   Sits in the bottom-right of the sub-page banner. Uses an <ol> so the
   trail is semantic, with the chevron separator drawn as a pseudo-element
   so it can be styled and never appears in copy/paste. The <nav> wrapper
   carries an aria-label that replaces the old visible "You are here:"
   prefix for screen readers. */


.breadcrumbs	{

				position:absolute;

				right:18px;

				bottom:10px;

				max-width:calc(100% - 36px);

				font:12px/1.5 Arial, Helvetica, sans-serif;

				color:#37424a;

				}


.breadcrumbs ol,
.breadcrumbs ul	{

				display:flex;

				flex-wrap:wrap;

				gap:4px 0;

				margin:0;

				padding:6px 12px;

				list-style:none;

				background:rgba(255,255,255,.82);

				border-radius:3px;

				box-shadow:0 1px 2px rgba(0,0,0,.06);

				backdrop-filter:saturate(140%) blur(2px);

				-webkit-backdrop-filter:saturate(140%) blur(2px);

				}


.breadcrumbs li	{

				display:flex;

				align-items:center;

				margin:0;

				padding:0 0 0 8px;

				}


.breadcrumbs li::before	{

				content:'\203A'; /* › */

				margin-right:8px;

				color:#8a99a4;

				font-weight:bold;

				}


.breadcrumbs li:first-child	{padding-left:0;}


.breadcrumbs li:first-child::before	{

				display:none;

				}


.breadcrumbs a	{

				color:#586b77;

				text-decoration:none;

				border-bottom:1px dotted transparent;

				}


.breadcrumbs a:hover,
.breadcrumbs a:focus	{

				color:var(--ccfs-green-text, #5f8a17);

				border-bottom-color:currentColor;

				}


.breadcrumbs [aria-current="page"]	{

				color:#37424a;

				font-weight:bold;

				max-width:32ch;

				overflow:hidden;

				text-overflow:ellipsis;

				white-space:nowrap;

				}

/* ---- Ordered/Unordered Lists ---- */


ul.unordered li	{

				color:#586b77;

				padding:0 0 0 34px;

				background:url(images/bullet.gif) 14px 5px no-repeat;

				}


/* ---- Lightbox Contact Form ---- */


.lightbox		{

				width:300px;

				height:auto;

				padding:15px 25px;

				border:5px solid #90CB22;

				}


.lightbox_start_loan span.required	{

				color:#f33 !important;

				}


.lightbox_start_loan p	{

				margin:0 0 12px;

				}


#contact h2		{

				font-size:34px;

				text-transform:uppercase;

				margin-bottom:20px;

				}

#contact .double-field div label {

    width: 145px;

}

#contact .double-field div {

                float: left;

                width: 145px;

}

#contact .half-input {

    width: 145px;

}

#contact .double-field input[type=text].half-input	{

    width:128px;

}

#contact .double-field select.half-input {

    height:24px;

}

#contact .double-field {

    width: 300px;

    clear: both;

}

#contact input[type=text]	{

				width:288px;

				}

#contact select	{

				width:300px;

				}

.pap {

	height: 26px;

}

.pap label, .pap input {

	float: left;

}

.pap label {

	text-indent: 6px;

	line-height: 20px;

}

.lightbox_start_loan p.captcha-desc {

	margin: 0 0 6px;

    width: 295px;

}

/* ---- MoneyStart Loan Form ---- */

.content_submenu	{

				margin:0;

				padding:0;

				list-style:none;

				}

.content_submenu li	{

				margin:0;

				padding:0;

				float:left;

				font-size:16px;

				}

.content_submenu li:first-child	{

				margin:0 15px 0 0;

				padding:0 15px 0 0;

				border-right:1px solid #abb5bb;

				}

.content_submenu li a	{

				color:#586b77;

				text-decoration:none;

				}

.content_submenu li a:hover,

.content_submenu li a.active	{

				color:#90CB22;

				text-decoration:none;

				}


.title			{

				font-size:24px;

				line-height:1.5em;

				font-weight:normal;

				margin:24px 0 10px;

				}


.title2			{font-size:20px !important;}

.title3			{font-size:16px !important; font-weight: bold; }

.unsuccess		{

				font-size:18px !important;

				font-weight:bold;

				color:#c1272d !important;

				border-bottom:none !important;

				margin:40px 0 !important;

				}

h5.unsuccess:after		{border-bottom:none !important;}

#wp_required_one{

	background:#DFE0E1;

	padding:2px 5px;

	margin-left:-5px;

	position:relative;

	top:2px;

	display:block;

}

#wp_tip{

	background:#dfe0e1;

	padding:3px 5px;

}			

.form_notification	{margin-left:135px;}

#sub_navigation{

	position: relative;

    top: 25px;

	left:20px;

	z-index:90;

}

#sub_navigation ul li{

	float:left;

	margin-right:12px;

}

#sub_navigation ul li a{

	text-decoration:none;

	color:#586B77;

	font-weight:900;

	font-family:Arial;

}

#sub_navigation ul li a:hover{

	color:#90CB22 !important;

}

.active_sub_navigation{

	color:#90CB22 !important;

}

#wp_overview{


}

#wp_app_form{

	width:920px;

}

.error_box{

	display:none;

}

#adding_fixed_loans{

	min-height:135px;

}

.error label{

	color:#FF0000;

}

.app_form_right{

	width:222px;

}

.remove_another_btn{

	color:#576B77;

}

#remove_income{

	margin-left:197px;

}

.app_form_right label{

	font-size:11px;

}

/* .app_form_right span{

	font-size:11px;

} */

#login_container{

background: none repeat scroll 0 0 #EFF2F4;

height: 100%;

margin: 0 auto;

overflow: hidden;

width: 960px;

}

#login_form_wrapper{

width:370px;

border:1px solid #576B77;

height:230px;

margin:0px auto;

}

#sub_container{

margin: 0 auto;

padding-top: 150px;

width: 370px;

}

.login_form_title{

background: none repeat scroll 0 0 #576B77;

color: #FFFFFF;

font-size: 15px;

font-weight: bold;

height: 18px;

padding: 7px 15px;

}

.login_form_sub_wrapper{

margin:10px;

background:#F3F5F7;

height:178px;

width:350px;

}

.login_form{

padding: 20px 0 0 32px;

}

.login_form input[type="text"], .login_form input[type="password"]{

background: none repeat scroll 0 0 #FFFFFF;

border: 1px solid #576B77;

clear: both;

display: block;

height: 22px;

margin: 15px 0px;

width: 273px;

}

.column_wide fieldset{

margin: 5px;

padding: 5px;

}

.column_wide fieldset legend{

padding:0px 5px;

}

.column_wide fieldset fieldset{

border:1px solid;

}

.app_details{

margin-top:10px;

}

.app_details  .main_block{

border:1px solid;

}

/*

    Pick-up page.

*/

#pickup_form_wrapper{

    width:370px;

    border:1px solid #576B77;

    height:230px;

    margin:0px auto;

}

.pickup_form_title{

    background: none repeat scroll 0 0 #576B77;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: bold;

    height: 18px;

    padding: 7px 15px;

}

.pickup_form_sub_wrapper{

    margin:10px;

    background:#F3F5F7;

    height:178px;

    width:350px;

}

.pickup_form{

    padding: 20px 0 0 32px;

}

.pickup_form input[type="text"] {

    background: none repeat scroll 0 0 #FFFFFF;

    border: 1px solid #576B77;

    float: left;

    height: 22px;

    margin: 15px 10px;

    width: 50px;

}

.dynbox {

    min-width: 350px;

    padding: 10px;

}

.dynbox fieldset {

    border: 1px solid #999999;

    padding: 10px;

}

.app_detail_footer { padding: 10px; text-align: center; }

.column_wide h2 {

	padding-left: 6px;

	font-size: 26px;

	padding-top: 5px;


		

}

/* =====================================================================
   2. WORDPRESS INTEGRATION
   Classes WordPress and its editor output that the original site
   never needed. Kept separate so the block above stays a faithful copy.
   ===================================================================== */

/* Admin bar offset */
.admin-bar .top_full { /* logo bar; nothing fixed, so no offset needed */ }

/* Skip link for accessibility */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 8px 16px;
	background: #374249;
	color: #fff;
	text-decoration: none;
}
.skip-link:focus { left: 10px; top: 10px; }

/* Screen-reader text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

/* the_content() / block editor output inside the body columns */
.column1 ol, .column6 ol, .column_wide ol { margin: 0 0 1.5em 24px; padding: 0; }
.column1 ul, .column6 ul, .column_wide ul { margin: 0 0 1.5em 24px; padding: 0; list-style: disc; }
.column6 ol > li, .column_wide ol > li { margin-bottom: 1em; padding-left: 4px; }
.column6 ul > li, .column_wide ul > li { margin-bottom: .35em; }
.column6 ul.unordered, .column_wide ul.unordered { list-style: none; margin-left: 0; }

.wp-caption { max-width: 100%; }
.wp-caption img { height: auto; }
.wp-caption-text { font-size: 11px; font-style: italic; padding: 4px 0; }
.alignnone { margin: 5px 0; }
img.aligncenter { display: block; margin: 0 auto 10px; }
.entry-content img { max-width: 100%; height: auto; }
.sticky, .gallery-caption, .bypostauthor { /* required by Theme Check */ }

/* WordPress generated nav menu — primary */
.menu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 200px;
	background: #374249;
	z-index: 100;
	display: none;
	padding: 0;
}
.menu li { position: relative; }
.menu li:hover > .sub-menu { display: block; }
.menu .sub-menu li { float: none; font-size: 14px; }
.menu .sub-menu li a { padding: 8px 18px; }
.menu .current-menu-item > a,
.menu .current_page_item > a { background: #1f272b; }

/* Footer menu lists generated by wp_nav_menu */
#footer .column ul.menu { padding: 0; }
#footer .column .menu li {
	float: none;
	font-size: 12px;
	margin: 0 0 5px;
	padding: 0 0 0 8px;
	background: url(images/arr2.png) 0 4px no-repeat;
}

/* Home hero slider (replaces the old Nivo Slider) */
.ccfs-hero {
	width: 960px;
	height: 300px;
	position: relative;
	overflow: hidden;
	background: #374249;
}
.ccfs-hero .ccfs-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity .5s ease-in-out;
	pointer-events: none;
}
.ccfs-hero .ccfs-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}
.ccfs-hero .ccfs-slide img { display: block; width: 100%; height: 100%; }
.ccfs-hero-nav {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 5;
}
.ccfs-hero-dot {
	width: 12px;
	height: 12px;
	margin-left: 5px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	outline: none;
}
.ccfs-hero-dot.is-active { background: #90CB22; border-color: #90CB22; }

/* Pagination (blog/index fallback) */
.pagination { padding: 20px 0; clear: both; }
.pagination a, .pagination span {
	display: inline-block;
	padding: 4px 9px;
	margin-right: 4px;
	border: 1px solid #dee0e3;
	text-decoration: none;
	color: #586b77;
}
.pagination .current { background: #90CB22; color: #fff; border-color: #90CB22; }

/* Comments / posts (only used by index.php fallback) */
.entry-meta { font-size: 11px; color: #8a9aa4; margin-bottom: 10px; }
.entry-title { margin-bottom: .4em; }

/* Generic page intro paragraph helper */
.page-intro { margin-bottom: 1.5em; }
.page-intro-meta {
	margin: -.5em 0 1.5em;
	padding: 10px 14px;
	background: var(--ccfs-light);
	border-left: 3px solid var(--ccfs-green);
	font-size: 13px;
	color: #5a6b77;
}

/* =====================================================================
   3. POLISH & MODERNISATION LAYER
   Non-destructive upgrades to the original markup. The fixed-width
   gradient GIFs and the bitmap sprite buttons are rebuilt in CSS so they
   stay crisp on high-resolution screens and never break when an element
   is resized. The visual design — colours, layout, type — is unchanged.
   ===================================================================== */

:root {
	--ccfs-green:        #90cb22; /* brand green                        */
	--ccfs-green-bright: #a8e024; /* lighter end of the box gradient    */
	--ccfs-green-deep:   #6f9e15; /* deeper green for the payment button*/
	--ccfs-green-text:   #5f8a17; /* AA-contrast green for small text   */
	--ccfs-dark:         #374249; /* nav / dark box                     */
	--ccfs-dark-2:       #2f383f;
	--ccfs-ink:          #3c4951; /* body copy (deeper for readability) */
	--ccfs-ink-soft:     #5a6b77; /* secondary text                     */
	--ccfs-light:        #eef1f4;
	--ccfs-line:         #dde3e8; /* subtle hairline borders            */

	/*
	 * Type. A refined system-font stack — no Google Fonts request, no
	 * GDPR/privacy headaches (a real concern for a UK lender), no flash
	 * of unstyled text, no extra HTTP request. The serif is reserved
	 * for editorial accents (the H1 over the page banner, pull quotes).
	 */
	--ccfs-font-sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ccfs-font-serif: "Iowan Old Style", "Source Serif Pro", "Apple Garamond", Cambria, Georgia, "Times New Roman", serif;
	--ccfs-font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Shadows used by the elevated nav, cards and back-to-top button. */
	--ccfs-shadow-sm: 0 1px 2px rgba(15, 25, 35, .06);
	--ccfs-shadow-md: 0 4px 14px rgba(15, 25, 35, .08);
	--ccfs-shadow-lg: 0 12px 28px rgba(15, 25, 35, .14);
}

html { -webkit-text-size-adjust: 100%; }

/* ----- Refined typography layer -----
   The legacy stylesheet at the top of this file sets body to 12px Arial.
   This polish layer raises it to a comfortable modern reading size,
   gives the headings a proper scale, and reserves a serif accent for
   editorial moments (the H1 over the page banner, contact/about pull
   quotes). Variables -> easy to retune in one place. */
html, body { font-family: var(--ccfs-font-sans); }
body {
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Original layout still uses the inner #container as the typographic
   root and sets 14px there for the home page. Bring both up to 15.5px
   so widths remain stable but text is easier to read. */
body#main #container,
body#sp  #container { font-size: 15.5px; }

/* Heading scale — Source Serif feel via system serif fallbacks, kept for
   accents only so the brand still reads as a clean sans-serif corporate. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ccfs-font-sans);
	letter-spacing: -0.005em;
}
#header_sub h1 {
	font-family: var(--ccfs-font-serif);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.15;
}
/* The two existing pull-quote columns on About and Contact get the
   same editorial serif. */
.column4 h2 {
	font-family: var(--ccfs-font-serif);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.25;
}

/* Better numerics on phone numbers, references, tabular figures. */
.entry-content code,
.entry-content tt,
.entry-content kbd,
.entry-content samp,
pre { font-family: var(--ccfs-font-mono); font-size: 0.92em; }
.entry-content code,
.entry-content tt,
.entry-content kbd,
.entry-content samp {
	background: var(--ccfs-light);
	padding: 1px 5px;
	border-radius: 3px;
}

/* ----- Smooth, subtle interaction feedback ----- */
a,
.menu li a,
a.more,
a.contact_us,
a.process_credit_card,
.ccfs-hero-dot {
	transition: color .15s ease, background-color .15s ease,
	            background .15s ease, opacity .15s ease;
}

/* ----- Accessible keyboard focus (the original set outline:none) ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--ccfs-green);
	outline-offset: 2px;
}

/* ----- Contrast: darker body copy + readable green for text ----- */
body              { color: var(--ccfs-ink); }
a                 { color: var(--ccfs-green-text); }
a:hover           { color: var(--ccfs-dark); }
h2                { color: var(--ccfs-green-text); }
a.more            { color: var(--ccfs-green-text); }
a.more:hover      { color: var(--ccfs-dark); }
.column_wide h3 a { color: var(--ccfs-green-text); }
#footer a         { color: #46535d; }
#footer a:hover   { color: var(--ccfs-green-text); }

/* Neutralise the broken legacy Opera min-height hack (it was invalid CSS). */
body:before { content: none; display: none; }

/* ----- Home intro boxes: GIF gradients -> crisp CSS gradients -----
   px1/px2/px3.gif were bitmap strips cut to the exact desktop column
   widths, so they showed a hard colour seam the moment a box was any
   wider — i.e. on every phone. These gradients reproduce the original
   look and scale cleanly to any width. */
.box1 {
	background: var(--ccfs-green);
	background-image: linear-gradient(to right, #90cb22, #a8e024);
}
.box2 {
	/* nudged a little deeper so the green heading meets AA contrast */
	background: #38434b;
	background-image: linear-gradient(to right, #333d45, #4c5b66);
}
.box3 {
	background: #eff2f4;
	background-image: linear-gradient(to right, #d6dfe4, #eff2f4);
}
/* Lift the white / green headings off the gradient for legibility. */
.box1 { text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
.box2 { text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }

/* SVG icon at the head of each intro box. The legacy markup is just a
   div with text; we drop a small icon in via .ccfs-box-icon and lay it
   out as inline-flex so the original height/centring rule still works. */
.box1, .box2, .box3 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.ccfs-box-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,.22);
	color: #fff;
	flex-shrink: 0;
	text-shadow: none;
}
.box3 .ccfs-box-icon {
	background: rgba(55, 66, 73, .12);
	color: var(--ccfs-dark);
}
@media (max-width: 600px) {
	.ccfs-box-icon { width: 26px; height: 26px; }
	.ccfs-box-icon svg { width: 18px; height: 18px; }
}

/* ----- "Contact Us" + "Process Credit Card" buttons -----
   Rebuilt from the bitmap sprites (contact_us_btn.png and
   precess_credit_card.png) as resolution-independent CSS. Identical
   arrow-tab shape and colours — just sharp on retina and safe to
   resize, so they never spill off the edge of a phone screen. */
a.contact_us,
a.process_credit_card {
	--tab: #86c01f;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	height: auto;
	min-width: 188px;
	min-height: 44px;
	margin-right: 22px;            /* reserves room for the arrow tab  */
	padding: 12px 30px 12px 24px;
	font: bold 17px/1 Arial, Helvetica, sans-serif;
	color: #fff;
	text-indent: 0;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
	background: linear-gradient(to bottom, #a4dd2a, #86c01f);
}
a.process_credit_card {
	--tab: #6f9e15;            /* deeper green, matching its sprite */
	background: linear-gradient(to bottom, #8cc426, #6f9e15);
}
a.contact_us::after,
a.process_credit_card::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 0;
	width: 0;
	height: 0;
	border: 22px solid transparent;
	border-right: 0;
	border-left: 22px solid var(--tab);
}
a.contact_us:hover,
a.process_credit_card:hover,
a:hover.contact_us,
a:hover.process_credit_card {
	--tab: #2f383f;
	color: #fff;
	background: linear-gradient(to bottom, #4a5660, #343f47);
}

/* ----- Sub-page banner heading: readable on top of photo banners ----- */
#header_sub h1 {
	text-shadow: 0 1px 8px rgba(255, 255, 255, .85),
	             0 0 2px  rgba(255, 255, 255, .95);
}

/* ----- Footer menu: stop the mobile-nav border rule leaking in -----
   The old responsive rule targeted ".menu li a", which also matched the
   two footer menus and drew stray divider lines through them. */
#footer .column .menu li a { border: 0; }

/* ----- Mobile navigation toggle: hidden unless on a phone ----- */
.ccfs-nav-toggle { display: none; }

/* ---------------------------------------------------------------------
   Content components
   Reusable building blocks for the expanded content pages (What We Offer,
   How It Works, FAQs, etc.). They use the original palette, square
   corners and Arial type, so new pages match the existing site exactly.
   They only appear when the matching class is used, so nothing already
   on the site is affected.
   --------------------------------------------------------------------- */

/* Primary call-to-action button — same look as the green site buttons. */
.column1 a.ccfs-btn,
.column6 a.ccfs-btn,
.column_wide a.ccfs-btn,
.entry-content a.ccfs-btn {
	display: inline-block;
	padding: 11px 22px;
	margin: 4px 0;
	background: linear-gradient(to bottom, var(--ccfs-green-bright), var(--ccfs-green-deep));
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.entry-content a.ccfs-btn:hover,
.column_wide a.ccfs-btn:hover,
.column6 a.ccfs-btn:hover,
.column1 a.ccfs-btn:hover {
	background: linear-gradient(to bottom, #4a5660, #343f47);
	color: #fff;
}
.entry-content a.ccfs-btn.is-ghost {
	background: #fff;
	color: var(--ccfs-green-text);
	border: 1px solid var(--ccfs-green);
	text-shadow: none;
}
.entry-content a.ccfs-btn.is-ghost:hover {
	background: var(--ccfs-light);
	color: var(--ccfs-dark);
	border-color: var(--ccfs-dark);
}

/* Callout panel — for key notes, eligibility summaries and CTAs. */
.entry-content .ccfs-callout {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: var(--ccfs-light);
	border-left: 4px solid var(--ccfs-green);
}
.entry-content .ccfs-callout > :last-child { margin-bottom: 0; }
.entry-content .ccfs-callout h3 { margin-top: 0; }

/* "Established 2024" credentials panel — used on the About Us page. */
.entry-content .ccfs-establish dl.ccfs-facts {
	margin: 1em 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
}
.entry-content .ccfs-establish dl.ccfs-facts dt {
	margin: 0;
	font-weight: 700;
	color: var(--ccfs-dark);
	white-space: nowrap;
}
.entry-content .ccfs-establish dl.ccfs-facts dd {
	margin: 0;
	color: var(--ccfs-ink);
}
@media (max-width: 640px) {
	.entry-content .ccfs-establish dl.ccfs-facts {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}
	.entry-content .ccfs-establish dl.ccfs-facts dd {
		margin-bottom: 8px;
	}
}

/* Numbered process steps — used on How It Works. */
.entry-content ol.ccfs-steps {
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
	counter-reset: ccfs-step;
}
.entry-content ol.ccfs-steps > li {
	position: relative;
	margin: 0 0 14px;
	padding: 16px 20px 16px 64px;
	background: #fff;
	border: 1px solid #dfe4e8;
	counter-increment: ccfs-step;
}
.entry-content ol.ccfs-steps > li::before {
	content: counter(ccfs-step);
	position: absolute;
	left: 16px;
	top: 16px;
	width: 32px;
	height: 32px;
	background: linear-gradient(to bottom, var(--ccfs-green-bright), var(--ccfs-green-deep));
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 32px;
	text-align: center;
}
.entry-content ol.ccfs-steps > li h3 {
	margin: 0 0 .35em;
	font-size: 16px;
}
.entry-content ol.ccfs-steps > li > :last-child { margin-bottom: 0; }

/* Feature / product cards — used on What We Offer. */
.entry-content .ccfs-cards {
	margin: 1.5em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.entry-content .ccfs-card {
	flex: 1 1 260px;
	padding: 22px;
	background: #fff;
	border: 1px solid #dfe4e8;
	border-top: 3px solid var(--ccfs-green);
}
.entry-content .ccfs-card h3 { margin-top: 0; }
.entry-content .ccfs-card > :last-child { margin-bottom: 0; }

/* Tick list — for benefit / eligibility lists. */
.entry-content ul.ccfs-ticks {
	margin: 1.4em 0;
	padding: 0;
	list-style: none;
}
.entry-content ul.ccfs-ticks > li {
	position: relative;
	margin: 0 0 .6em;
	padding-left: 28px;
}
.entry-content ul.ccfs-ticks > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 8px;
	height: 13px;
	border: solid var(--ccfs-green-deep);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* FAQ accordion — native <details>, works with JavaScript disabled. */
.entry-content .ccfs-faq {
	margin: 1.5em 0;
	border-top: 1px solid #dfe4e8;
}
.entry-content .ccfs-faq details {
	border-bottom: 1px solid #dfe4e8;
}
.entry-content .ccfs-faq summary {
	position: relative;
	padding: 15px 40px 15px 4px;
	font-weight: bold;
	color: var(--ccfs-dark);
	cursor: pointer;
	list-style: none;
}
.entry-content .ccfs-faq summary::-webkit-details-marker { display: none; }
.entry-content .ccfs-faq summary::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 18px;
	width: 8px;
	height: 8px;
	border: solid var(--ccfs-green-deep);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.entry-content .ccfs-faq details[open] summary::after {
	transform: rotate(-135deg);
	top: 21px;
}
.entry-content .ccfs-faq summary:hover { color: var(--ccfs-green-text); }
.entry-content .ccfs-faq summary:focus-visible {
	outline: 2px solid var(--ccfs-green-deep);
	outline-offset: 2px;
}
.entry-content .ccfs-faq details > :not(summary) {
	margin: 0 4px 14px;
}

/* ---------------------------------------------------------------------
   Editor heading spacing
   Headings entered in the WordPress editor (h2/h3) were sitting flush
   against the paragraph beneath them. These rules give them breathing
   room without altering their colour or size.
   --------------------------------------------------------------------- */
.entry-content h2 {
	margin: 1.5em 0 .5em;
	line-height: 1.25;
}
.entry-content h3 {
	margin: 1.3em 0 .4em;
	line-height: 1.3;
}
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > :first-child { margin-top: 0; }
.entry-content p { margin: 0 0 1em; }
.entry-content > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Search forms — header (desktop) and inside the mobile menu
   --------------------------------------------------------------------- */
.ccfs-search { display: flex; }
.ccfs-search-field {
	box-sizing: border-box;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid #c2cbd2;
	background: #fff;
	color: var(--ccfs-ink);
	font: 14px/1.2 Arial, Helvetica, sans-serif;
}
.ccfs-search-field:focus-visible {
	outline: 2px solid var(--ccfs-green-deep);
	outline-offset: 1px;
}
.ccfs-search-submit {
	box-sizing: border-box;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	background: linear-gradient(to bottom, var(--ccfs-green-bright), var(--ccfs-green-deep));
	color: #fff;
	font: bold 13px/1.2 Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.ccfs-search-submit:hover {
	background: linear-gradient(to bottom, #4a5660, #343f47);
}

/* Desktop search: sits in the header white space, aligned with the logo */
#top { position: relative; }
.ccfs-search-desktop {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.ccfs-search-desktop .ccfs-search-field { width: 200px; }

/* ---------------------------------------------------------------------
   Logo — bundled or custom (Appearance > Customize > Logo)
   The original CSS positions only the bundled "a.logo". When a logo is
   set in the Customizer, WordPress instead outputs ".custom-logo-link"
   and ".custom-logo", which the original CSS does not place or size on
   desktop — so a custom logo lands unstyled in the corner of the bar.
   These rules make a custom logo sit and scale exactly like the bundled
   one, on every screen, without distorting its proportions.
   --------------------------------------------------------------------- */
.custom-logo-link {
	display: block;
	padding: 26px 0 0 13px;
	outline: none;
}
a.logo img,
.custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 50px;
}

/* The mobile-menu search only appears on phone-sized screens */
.ccfs-search-mobile { display: none; }

/* ---------------------------------------------------------------------
   Footer: related-company line
   --------------------------------------------------------------------- */
.ccfs-related {
	/* clear:both stops this line wrapping the floated footer columns and
	   the floated .copy block on desktop — it was only correct on mobile
	   because the floats collapse there. */
	clear: both;
	margin: 14px 0 0;
	font-size: 13px;
	color: #5a6b77;
}
.ccfs-related a { color: var(--ccfs-green-text); }

/* ---------------------------------------------------------------------
   Cookie-consent banner
   Hidden by default; revealed by JavaScript when no choice is recorded,
   so visitors who have already chosen never see a flash of the banner.
   --------------------------------------------------------------------- */
.ccfs-cookie {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	box-sizing: border-box;
	padding: 16px 20px;
	background: var(--ccfs-dark);
	color: #eef1f4;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
.ccfs-cookie.is-visible {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
}
.ccfs-cookie-text {
	flex: 1 1 460px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}
.ccfs-cookie-text a { color: var(--ccfs-green-bright); }
.ccfs-cookie-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
}
.ccfs-cookie .ccfs-btn {
	display: inline-block;
	margin: 0;
	padding: 11px 22px;
	border: 0;
	background: linear-gradient(to bottom, var(--ccfs-green-bright), var(--ccfs-green-deep));
	color: #fff;
	font: bold 14px/1.2 Arial, Helvetica, sans-serif;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
	text-decoration: none;
	cursor: pointer;
}
.ccfs-cookie .ccfs-btn:hover {
	background: linear-gradient(to bottom, #2b333a, #1f262b);
	color: #fff;
}
.ccfs-cookie .ccfs-btn.is-ghost {
	background: transparent;
	color: #eef1f4;
	border: 1px solid #6f7d87;
	text-shadow: none;
}
.ccfs-cookie .ccfs-btn.is-ghost:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

/* ---------------------------------------------------------------------
   Online request forms  (inc/forms.php)
   --------------------------------------------------------------------- */
.ccfs-form-wrap { margin: 0 0 26px; }
.ccfs-form-title { margin: 0 0 6px; }
.ccfs-form-intro { margin: 0 0 16px; color: #5a6b77; }

.ccfs-form .ccfs-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
}
.ccfs-field { box-sizing: border-box; }
.ccfs-field-full { flex: 1 1 100%; }
.ccfs-field-half { flex: 1 1 calc(50% - 9px); min-width: 220px; }

.ccfs-field label {
	display: block;
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 14px;
	color: #374249;
}
.ccfs-field input[type="text"],
.ccfs-field input[type="email"],
.ccfs-field input[type="tel"],
.ccfs-field input[type="number"],
.ccfs-field input[type="date"],
.ccfs-field select,
.ccfs-field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 9px 10px;
	font-size: 15px;
	font-family: inherit;
	color: #374249;
	background: #fff;
	border: 1px solid #c4ccd1;
	border-radius: 3px;
}
.ccfs-field textarea { resize: vertical; min-height: 92px; }
.ccfs-field input:focus,
.ccfs-field select:focus,
.ccfs-field textarea:focus {
	outline: 2px solid var(--ccfs-green);
	outline-offset: 1px;
	border-color: var(--ccfs-green);
}
.ccfs-field-help {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #7a8893;
}
.ccfs-req { color: #c0392b; }

.ccfs-field-error input,
.ccfs-field-error select,
.ccfs-field-error textarea {
	border-color: #c0392b;
	background: #fdf3f2;
}

.ccfs-checkbox-label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: normal !important;
}
.ccfs-checkbox-label input { margin-top: 3px; flex: 0 0 auto; }
.ccfs-checkbox-label a { color: var(--ccfs-green-text); }

.ccfs-form-actions { margin: 18px 0 0; }

/* The form submit is a <button>; the original .ccfs-btn rule only styles
   <a>, so give the button the same retro pill look here. */
.ccfs-form button.ccfs-btn {
	display: inline-block;
	padding: 11px 22px;
	margin: 4px 0;
	background: linear-gradient(to bottom, var(--ccfs-green-bright), var(--ccfs-green-deep));
	color: #fff;
	font-family: inherit;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.2;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
.ccfs-form button.ccfs-btn:hover,
.ccfs-form button.ccfs-btn:focus {
	background: linear-gradient(to bottom, #4a5660, #343f47);
	color: #fff;
}
.ccfs-form button.ccfs-btn:focus-visible {
	outline: 2px solid var(--ccfs-green);
	outline-offset: 2px;
}

/* Honeypot — visually hidden but still present for bots. */
.ccfs-hp {
	position: absolute !important;
	left: -9999rem;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ccfs-form-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 3px;
	font-size: 14px;
}
.ccfs-form-notice-ok {
	background: #eef7df;
	border: 1px solid var(--ccfs-green);
	color: #3d5610;
}
.ccfs-form-notice-err {
	background: #fdf3f2;
	border: 1px solid #e3b3ad;
	color: #8a2b20;
}

/* Forms hub: each form folded into a native accordion. */
.ccfs-form-list .ccfs-faq details { margin-bottom: 10px; }
.ccfs-form-list .ccfs-form-wrap { margin: 6px 0 0; }
.ccfs-form-list .ccfs-form-title { display: none; }

/* ---------------------------------------------------------------------
   Support Articles: topic groups, recommended lists, single article
   --------------------------------------------------------------------- */
.ccfs-faq-topic { margin: 0 0 28px; }
.ccfs-faq-topic > h2 { margin: 0 0 6px; }
.ccfs-faq-topic-desc { margin: 0 0 12px; color: #5a6b77; }

/* Topic index — used on the FAQs hub page.
   The page is no longer one big accordion; each Topic is a card with a
   linked heading (goes to the Topic's own archive page), a short
   description, the first few article titles as direct links, and a
   "see all" tail link. Two columns on desktop, one on phones. */
.ccfs-topic-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 28px;
}
.entry-content .ccfs-topic-card {
	margin: 0;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid #e3e8ec;
	border-left: 4px solid var(--ccfs-green);
}
.entry-content .ccfs-topic-card-title {
	margin: 0 0 6px;
	font-size: 18px;
	color: var(--ccfs-green-text);
}
.entry-content .ccfs-topic-card-title a {
	color: inherit;
	text-decoration: none;
}
.entry-content .ccfs-topic-card-title a:hover,
.entry-content .ccfs-topic-card-title a:focus {
	color: var(--ccfs-dark);
}
.entry-content .ccfs-topic-card-desc {
	margin: 0 0 10px;
	color: #5a6b77;
	font-size: 13px;
	line-height: 1.5;
}
.entry-content .ccfs-topic-card-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}
.entry-content .ccfs-topic-card-list li {
	margin: 0;
	padding: 5px 0 5px 14px;
	position: relative;
	border-top: 1px solid #eef1f4;
}
.entry-content .ccfs-topic-card-list li:first-child { border-top: 0; }
.entry-content .ccfs-topic-card-list li::before {
	content: '\203A';
	position: absolute;
	left: 0;
	top: 5px;
	color: var(--ccfs-green);
	font-weight: bold;
}
.entry-content .ccfs-topic-card-list a {
	color: var(--ccfs-green-text);
	text-decoration: none;
}
.entry-content .ccfs-topic-card-list a:hover,
.entry-content .ccfs-topic-card-list a:focus {
	color: var(--ccfs-dark);
	text-decoration: underline;
}
.entry-content .ccfs-topic-card-more {
	margin: 4px 0 0;
	font-size: 13px;
}

.ccfs-reco {
	display: block;
	margin: 26px 0 0;
	padding: 18px 20px;
	background: #f4f6f7;
	border: 1px solid #e0e5e8;
	border-left: 4px solid var(--ccfs-green);
	border-radius: 3px;
}
.ccfs-reco h3 { margin: 0 0 10px; }
.ccfs-reco-list { margin: 0; padding: 0; list-style: none; }
.ccfs-reco-list li {
	margin: 0;
	padding: 6px 0 6px 18px;
	position: relative;
	border-bottom: 1px solid #e6eaec;
}
.ccfs-reco-list li:last-child { border-bottom: 0; }
.ccfs-reco-list li::before {
	content: "›";
	position: absolute;
	left: 2px;
	color: var(--ccfs-green-text);
	font-weight: bold;
}
.ccfs-reco-list li a { color: var(--ccfs-green-text); }
.ccfs-reco-all { margin: 12px 0 0; font-size: 14px; }

.ccfs-faq-shortlist { margin: 8px 0 0; }

/* Single Support Article layout: article + sidebar. */
.ccfs-article-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}
.ccfs-article-main { flex: 1 1 540px; min-width: 0; }
.ccfs-article-side { flex: 1 1 240px; }
.ccfs-article-side .ccfs-reco { margin-top: 0; }
.ccfs-topic-tag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--ccfs-green);
	color: #fff;
	border-radius: 2px;
}
.ccfs-topic-tag a { color: #fff; }
.ccfs-back { margin: 22px 0 0; font-size: 14px; }
.ccfs-back a { color: var(--ccfs-green-text); }

/* ---------------------------------------------------------------------
   Recommended reading + internal links (Newsroom articles)
   --------------------------------------------------------------------- */
.ccfs-related-posts { margin: 32px 0 0; }
.ccfs-related-posts > h3 {
	margin: 0 0 14px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--ccfs-green);
}
.ccfs-internal-links { margin-top: 24px; }
.ccfs-inline-links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.ccfs-inline-links li { margin: 0; }
.ccfs-inline-links li a {
	display: inline-block;
	padding: 5px 12px;
	font-size: 13px;
	background: #fff;
	border: 1px solid #d3d9dd;
	border-radius: 14px;
	color: var(--ccfs-green-text);
}
.ccfs-inline-links li a:hover {
	background: var(--ccfs-green);
	border-color: var(--ccfs-green);
	color: #fff;
}

/* ---------------------------------------------------------------------
   Office map embed
   --------------------------------------------------------------------- */
.ccfs-map {
	margin: 16px 0;
	border: 1px solid #d3d9dd;
	border-radius: 3px;
	overflow: hidden;
	line-height: 0;
}
.ccfs-map iframe {
	display: block;
	width: 100%;
	height: var(--ccfs-map-h, 320px);
	border: 0;
}

/* =====================================================================
   4. RESPONSIVE LAYER
   The desktop design is a fixed 960px layout and is left exactly as the
   original. Everything below lives inside max-width media queries, so it
   only ever applies to tablets and phones.
   ===================================================================== */

/* ---------- Tablet and below (<= 980px) ---------- */
@media (max-width: 980px) {
	#top, #nav, #header, #header_sub, #container, #fsb, #footer {
		width: auto !important;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	#container { display: block; }

	/* Header / hero scale fluidly */
	.header_full { background-image: none; }
	.header_full, #header, #header_sub { height: auto; }
	#header_sub { overflow: hidden; }
	#header_sub img, #header img { width: 100%; height: auto; display: block; }
	.nivoSlider, .ccfs-hero { width: 100% !important; height: auto !important; }
	.ccfs-hero img { width: 100%; height: auto; display: block; }
	#header_sub h1 { font-size: 40px; }

	/* Logo never overflows its bar */
	.custom-logo, .custom-logo-link img, a.logo img {
		max-height: 50px;
		width: auto;
		height: auto;
	}

	/* Stack the home boxes + content columns. border-box keeps padding
	   inside the element so nothing ever overflows the viewport. */
	.box1, .box2, .box3,
	.column1, .column2, .column3, .column4,
	.column5, .column6, .column_wide {
		width: auto !important;
		float: none !important;
		box-sizing: border-box;
	}
	.box1, .box2, .box3 {
		height: auto;
		min-height: 0;
		font-size: 26px;
		line-height: 1.25;
		padding: 18px 24px;
	}
	.column4 { padding-top: 6px; padding-bottom: 6px; }
	.column5 img { max-width: 100%; height: auto; }

	/* Home page: pair each coloured intro box with its own column.
	   In source order the three boxes precede the three columns, so a
	   stacked layout separates every heading from its text. Flexbox
	   `order` interleaves them — box1, column1, box2, column2, box3,
	   column3 — so each box reads straight into its own content and
	   button. Scoped to .ccfs-front, so no other page is affected and
	   the desktop three-column layout is left exactly as it was. */
	.ccfs-front #container {
		display: flex;
		flex-direction: column;
	}
	.ccfs-front #container > .clear { display: none; }
	.ccfs-front .box1    { order: 1; }
	.ccfs-front .column1 { order: 2; }
	.ccfs-front .box2    { order: 3; }
	.ccfs-front .column2 { order: 4; }
	.ccfs-front .box3    { order: 5; }
	.ccfs-front .column3 { order: 6; }

	/* Footer columns sit side by side while there is room */
	#footer .column { width: 46%; }
}

/* ---------- Phone (<= 600px) ---------- */
@media (max-width: 600px) {
	/* Comfortable reading sizes on a small screen */
	body { font-size: 15px; }
	#container, body#main #container { font-size: 16px; line-height: 1.55; }
	.column1, .column2, .column3, .column6, .column_wide { font-size: 16px; }
	.column1, .column2, .column3 { padding: 22px 20px; }
	.column6 { padding: 24px 20px; }
	.column_wide { padding: 20px; }

	/* Intro boxes: a sensible heading size for narrow screens */
	.box1, .box2, .box3 { font-size: 22px; padding: 16px 20px; }

	/* Banner */
	#header_sub h1 { font-size: 26px; left: 16px; bottom: 8px; }
	.breadcrumbs   { right: 12px; bottom: 8px; font-size: 11px; max-width: calc(100% - 24px); }
	.breadcrumbs ol,
	.breadcrumbs ul { padding: 4px 9px; }
	.breadcrumbs [aria-current="page"] { max-width: 22ch; }

	/* ----- Collapsible navigation -----
	   The toggle and the collapse only switch on when JavaScript has run
	   (the .ccfs-js class). Without JS the full menu simply stays
	   visible, so navigation is never trapped shut. */
	#nav { position: relative; }
	.ccfs-js .ccfs-nav-toggle {
		display: flex;
		align-items: center;
		gap: 11px;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 15px 18px;
		border: 0;
		background: transparent;
		color: #fff;
		font: bold 17px/1 Arial, Helvetica, sans-serif;
		cursor: pointer;
	}
	.ccfs-nav-toggle-text { letter-spacing: .02em; }
	.ccfs-nav-toggle-icon {
		position: relative;
		display: block;
		width: 24px;
		height: 2px;
		background: #fff;
		transition: background .15s ease;
	}
	.ccfs-nav-toggle-icon::before,
	.ccfs-nav-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 24px;
		height: 2px;
		background: #fff;
		transition: transform .2s ease;
	}
	.ccfs-nav-toggle-icon::before { top: -7px; }
	.ccfs-nav-toggle-icon::after  { top:  7px; }
	/* bars morph into an X while the menu is open */
	.ccfs-nav-toggle[aria-expanded="true"] .ccfs-nav-toggle-icon { background: transparent; }
	.ccfs-nav-toggle[aria-expanded="true"] .ccfs-nav-toggle-icon::before {
		transform: translateY(7px) rotate(45deg);
	}
	.ccfs-nav-toggle[aria-expanded="true"] .ccfs-nav-toggle-icon::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* the menu: collapsed by default, revealed by .is-open */
	.ccfs-js #primary-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height .28s ease;
	}
	.ccfs-js #primary-menu.is-open { max-height: 520px; }

	.menu li { float: none; width: 100%; font-size: 17px; }
	#primary-menu li a {
		padding: 14px 18px;
		border-top: 1px solid #2b343a;
	}
	#primary-menu .sub-menu { position: static; min-width: 0; }
	#primary-menu .sub-menu li a { padding-left: 36px; background: #2f383f; }

	/* Footer: single column, tidy tap targets, aligned bullets */
	#footer, body#sp #footer { font-size: 14px; line-height: 1.5; }
	#footer .column { width: 100%; float: none; margin: 0 0 4px; }
	#footer .copy   { float: none; margin-top: 14px; }
	#footer .column .menu li {
		margin: 0;
		padding: 11px 0 11px 16px;
		background-position: 0 16px;
		border-bottom: 1px solid #e1e5e9;
	}
	#footer .column .menu li a { display: block; }

	/* Contact button: centred and never clipped by the screen edge */
	#fsb       { padding: 24px 16px; text-align: center; }
	#main #fsb { padding: 28px 16px; }
	a.contact_us { float: none; }

	/* "Find out more" links a touch larger to tap */
	a.more { font-size: 15px; }

	/* Wide product tables collapse to stacked blocks */
	.column_wide table, .column_wide tbody,
	.column_wide tr, .column_wide td {
		display: block;
		width: auto !important;
	}
	.column_wide td img { max-width: 100%; height: auto; }

	/* New content components: comfortable spacing on phones */
	.entry-content .ccfs-cards { gap: 12px; }
	.entry-content .ccfs-card { flex-basis: 100%; padding: 18px; }
	.entry-content .ccfs-callout { padding: 16px 18px; }
	.entry-content ol.ccfs-steps > li { padding: 14px 16px 14px 58px; }
	.entry-content ol.ccfs-steps > li::before { left: 14px; top: 14px; }
	.entry-content a.ccfs-btn { display: block; text-align: center; }

	/* Topic-index grid: one column on phones */
	.ccfs-topic-grid { grid-template-columns: 1fr; gap: 14px; }
	.entry-content .ccfs-topic-card { padding: 16px 18px; }

	/* Desktop search hidden on phones; mobile search shown in the menu */
	.ccfs-search-desktop { display: none; }
	.ccfs-search-mobile {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 12px 14px;
		background: #2f383f;
		border-top: 1px solid #2b343a;
	}
	.ccfs-search-mobile .ccfs-search-field {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 16px; /* 16px avoids iOS zoom-on-focus */
	}
	.ccfs-search-mobile .ccfs-search-submit { font-size: 14px; white-space: nowrap; }

	/* The mobile search collapses together with the menu (JS only), so it
	   sits at the top of the open hamburger menu and is hidden when shut. */
	.ccfs-js .ccfs-search-mobile {
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-top: 0;
		overflow: hidden;
		transition: max-height .28s ease, padding .28s ease;
	}
	.ccfs-js .ccfs-nav-toggle[aria-expanded="true"] ~ .ccfs-search-mobile {
		max-height: 84px;
		padding-top: 12px;
		padding-bottom: 12px;
		border-top: 1px solid #2b343a;
	}

	/* Cookie banner: stack the text above full-width buttons */
	.ccfs-cookie { padding: 14px 16px; }
	.ccfs-cookie-actions { width: 100%; }
	.ccfs-cookie-actions .ccfs-btn { flex: 1 1 0; text-align: center; }

	/* New components: stack form fields and the article sidebar */
	.ccfs-field-half { flex-basis: 100%; min-width: 0; }
	.entry-content .ccfs-form .ccfs-btn { display: inline-block; width: auto; }
	.ccfs-article-layout { gap: 22px; }
	.ccfs-article-main,
	.ccfs-article-side { flex-basis: 100%; }
	.ccfs-reco { padding: 16px 18px; }
}

/* ---------- Very small phones (<= 380px) ---------- */
@media (max-width: 380px) {
	.box1, .box2, .box3 { font-size: 20px; }
	#header_sub h1 { font-size: 23px; }
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}

/* =====================================================================
   4. v1.8 — REFINED COMPONENTS
   Sticky navigation with on-scroll elevation, card hover lift, back-to-
   top button, refined hovers, and a proper print stylesheet. Added as
   a self-contained block so it can be turned off cleanly if needed.
   ===================================================================== */

/* ----- Sticky primary navigation -----
   The original layout was a fixed 960px ladder of top -> nav -> banner.
   On a long page (Newsroom, FAQ archives, Support hub) the menu scrolls
   away. Pinning it gives a calmer, more app-like feel — and it gives
   the nav a moment to gain elevation, which is a nice tactile cue. */
.nav_full {
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow .2s ease;
}
.nav_full.is-scrolled { box-shadow: var(--ccfs-shadow-md); }
.admin-bar .nav_full { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav_full { top: 46px; } }

/* Slightly refined desktop menu items.
   The legacy menu has hard 1px gutters between items and a flat dark
   bar. This adds a soft underline accent under the current item and a
   subtle background lift on hover — keeping the original geometry. */
@media (min-width: 600px) {
	.menu > li > a {
		position: relative;
		transition: background-color .15s ease, color .15s ease;
	}
	.menu > li > a::after {
		content: '';
		position: absolute;
		left: 12px; right: 12px; bottom: 0;
		height: 2px;
		background: var(--ccfs-green);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .22s ease;
	}
	.menu > li > a:hover,
	.menu > li > a:focus-visible {
		background-color: rgba(255,255,255,.04);
	}
	.menu > li.current-menu-item > a::after,
	.menu > li.current_page_item > a::after,
	.menu > li.current-menu-ancestor > a::after {
		transform: scaleX(1);
	}
	.menu > li > a:hover::after,
	.menu > li > a:focus-visible::after {
		transform: scaleX(1);
	}
}

/* ----- Card hover lift -----
   Topic cards on the FAQs hub and the three quick-action cards on
   Support feel inert in the v1.7 implementation. A small translate
   + shadow on hover signals interactivity without being noisy. */
.entry-content .ccfs-topic-card,
.entry-content .ccfs-card {
	transition:
		transform .18s ease,
		box-shadow .18s ease,
		border-color .18s ease;
	box-shadow: var(--ccfs-shadow-sm);
}
.entry-content .ccfs-topic-card:hover,
.entry-content .ccfs-card:hover,
.entry-content .ccfs-topic-card:focus-within,
.entry-content .ccfs-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--ccfs-shadow-md);
}
/* Whole card becomes the click target via the heading link, but only
   the actual <a> is the interactive element. Make that obvious. */
.entry-content .ccfs-topic-card-title a:focus-visible,
.entry-content .ccfs-card h3 a:focus-visible {
	outline-offset: 4px;
}

/* ----- Subtle scroll-reveal for the home intro boxes -----
   No JS — just a CSS keyframe that runs once on load. Honours
   prefers-reduced-motion via the earlier rule. */
@keyframes ccfs-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
body#main .box1,
body#main .box2,
body#main .box3 {
	animation: ccfs-rise .5s ease-out both;
}
body#main .box1 { animation-delay: .05s; }
body#main .box2 { animation-delay: .15s; }
body#main .box3 { animation-delay: .25s; }

/* ----- Back-to-top button -----
   Inserted by theme.js once the page has scrolled enough. */
.ccfs-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ccfs-dark);
	color: #fff;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--ccfs-shadow-md);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
	z-index: 250;
}
.ccfs-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.ccfs-to-top:hover,
.ccfs-to-top:focus-visible { background: var(--ccfs-green-text); }
.ccfs-to-top svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 600px) {
	.ccfs-to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* ----- More humane breadcrumb on phones -----
   The v1.7 breadcrumb pill was tucked into the banner; on a narrow
   phone screen with a long article title that gets fiddly. Move it
   below the banner instead. */
@media (max-width: 600px) {
	#header_sub { padding-bottom: 8px; }
	.breadcrumbs {
		position: static;
		margin: 8px 12px 0;
		padding: 6px 10px;
		background: var(--ccfs-light);
		backdrop-filter: none;
	}
}

/* ----- Section divider helper -----
   A subtle hairline-with-dot — used between the homepage's three-box
   row and the welcome columns. No new markup needed when used as a
   utility class. */
.ccfs-divider {
	height: 1px;
	background: var(--ccfs-line);
	margin: 28px 0;
	position: relative;
}
.ccfs-divider::after {
	content: '';
	position: absolute;
	left: 50%; top: -3px;
	width: 7px; height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: var(--ccfs-green);
}

/* ----- "Pulse" highlight on a card the user has just been linked to -----
   When the URL hash matches a topic card or quick-action card, fade a
   soft green halo around it for a second so the eye lands on it. */
@keyframes ccfs-target-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(144, 203, 34, .55); }
	60%  { box-shadow: 0 0 0 8px rgba(144, 203, 34, 0); }
	100% { box-shadow: var(--ccfs-shadow-sm); }
}
.entry-content .ccfs-topic-card:target,
.entry-content .ccfs-card:target {
	animation: ccfs-target-pulse 1.4s ease-out both;
}

/* ----- Refined "more" links and inline CTA arrows ----- */
.entry-content a.more,
.entry-content .ccfs-topic-card-more a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}
.entry-content a.more::after,
.entry-content .ccfs-topic-card-more a::after {
	content: '\2192'; /* right arrow */
	display: inline-block;
	transition: transform .18s ease;
}
.entry-content a.more:hover::after,
.entry-content .ccfs-topic-card-more a:hover::after {
	transform: translateX(3px);
}

/* ----- Refined hairlines on listy content -----
   ccfs-ticks (used on Support / Contact) get a hairline divider
   between items and a small SVG-shaped checkmark via :before. */
.entry-content ul.ccfs-ticks li {
	border-top: 1px solid var(--ccfs-line);
	padding-top: 8px;
	padding-bottom: 8px;
}
.entry-content ul.ccfs-ticks li:first-child { border-top: 0; }

/* ----- Print styles -----
   Print should be sober: no nav, no footer button strip, no map iframe.
   Headings on their own line, links shown as printable URLs. */
@media print {
	.top_full, .nav_full, #fsb, .footer_full, .ccfs-cookie,
	.ccfs-to-top, .breadcrumbs, iframe { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	#header_sub img { display: none; }
	#header_sub h1 { color: #000; font-size: 20pt; }
	a, a:visited { color: #000; text-decoration: underline; }
	a[href^="http"]::after,
	a[href^="/"]::after {
		content: " (" attr(href) ") ";
		font-size: .85em;
		color: #444;
	}
	h2, h3 { page-break-after: avoid; }
	.entry-content .ccfs-topic-card,
	.entry-content .ccfs-card { box-shadow: none; border: 1px solid #ccc; }
}

/* =====================================================================
   BUSINESS LOANS — marketing page, calculator, application, portal
   (1.9.0)
   ===================================================================== */

/* ----- Marketing page sections (page-business-loans.php) ----- */
.ccfs-bl-lead {
	margin: 12px 0 24px;
	padding: 18px 22px;
	background: var(--ccfs-tint, #f5f9eb);
	border-left: 4px solid var(--ccfs-green, #90cb22);
	border-radius: 4px;
}
.ccfs-bl-lead h2 { margin-top: 0; }
.ccfs-bl-lede { font-size: 1.05em; font-weight: 500; }
.ccfs-bl-section { margin: 28px 0; }
.ccfs-bl-section > h2 {
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ccfs-line, #e3e3e3);
}
.ccfs-bl-note {
	font-size: .92em;
	color: var(--ccfs-mute, #666);
	font-style: italic;
}
.ccfs-bl-cases {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 14px 0;
}
.ccfs-bl-case {
	flex: 1 1 250px;
	background: #fff;
	border: 1px solid var(--ccfs-line, #e3e3e3);
	border-top: 3px solid var(--ccfs-green, #90cb22);
	padding: 14px 16px;
	border-radius: 3px;
	box-shadow: var(--ccfs-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.ccfs-bl-case h3 { margin-top: 0; font-size: 1.05em; color: var(--ccfs-dark, #2a3a14); }
.ccfs-bl-steps {
	list-style: decimal;
	margin: 14px 0 14px 26px;
	padding: 0;
}
.ccfs-bl-steps > li {
	margin-bottom: 14px;
	padding-left: 6px;
}
.ccfs-bl-steps strong { display: block; color: var(--ccfs-dark, #2a3a14); font-size: 1.02em; }
.ccfs-bl-steps p { margin: 4px 0 0; }
.ccfs-bl-cta {
	margin-top: 32px;
	padding: 22px;
	background: var(--ccfs-tint, #f5f9eb);
	border-radius: 4px;
	text-align: center;
}
.ccfs-bl-cta h2 { margin-top: 0; border-bottom: 0; }
.ccfs-bl-cta .ccfs-btn { margin: 4px 6px; }

/* ----- Calculator widget ([ccfs_calculator]) ----- */
.ccfs-calc {
	background: #fff;
	border: 1px solid var(--ccfs-line, #e3e3e3);
	border-radius: 4px;
	padding: 16px 18px;
	margin: 14px 0;
	box-shadow: var(--ccfs-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.ccfs-calc-controls { margin-bottom: 12px; }
.ccfs-calc-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0;
}
.ccfs-calc-l {
	min-width: 110px;
	font-weight: 600;
	color: var(--ccfs-dark, #2a3a14);
}
.ccfs-calc-row input[type="range"] {
	flex: 1 1 220px;
	min-width: 160px;
	height: 22px;
	accent-color: var(--ccfs-green, #90cb22);
}
.ccfs-calc-out {
	min-width: 100px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.ccfs-radio {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 12px;
	cursor: pointer;
}
.ccfs-radio input[type="radio"] { margin: 0; }
.ccfs-calc-summary {
	background: var(--ccfs-tint, #f5f9eb);
	border-radius: 4px;
	padding: 12px 16px;
	margin-top: 12px;
}
.ccfs-calc-summary dl {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 16px;
	margin: 0;
}
.ccfs-calc-summary dt {
	color: var(--ccfs-mute, #666);
}
.ccfs-calc-summary dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.ccfs-calc-total {
	font-size: 1.15em;
	color: var(--ccfs-dark, #2a3a14);
}
.ccfs-calc-warn {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	padding: 6px 8px;
	background: #fffbe6;
	border: 1px solid #f0d97a;
	border-radius: 3px;
	font-size: .9em;
	color: #6b5400;
}
.ccfs-calc-cta { text-align: center; margin: 14px 0 0; }
.ccfs-calc-cta .ccfs-btn { margin: 0 4px; }

/* ----- Application form ([ccfs_application]) ----- */
.ccfs-app {
	background: #fff;
	border: 1px solid var(--ccfs-line, #e3e3e3);
	border-radius: 4px;
	padding: 20px 22px;
	margin: 16px 0;
	box-shadow: var(--ccfs-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.ccfs-app h2 { margin-top: 0; }
.ccfs-app-note {
	background: var(--ccfs-tint, #f5f9eb);
	padding: 10px 14px;
	border-radius: 3px;
	margin: 10px 0 18px;
	font-size: .95em;
}
.ccfs-app-save-note {
	font-size: .88em;
	color: var(--ccfs-mute, #666);
	margin-top: 10px;
	font-style: italic;
}

/* Step indicator (numbered progress bar) */
.ccfs-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	counter-reset: ccfs-step;
}
.ccfs-step {
	flex: 1 1 80px;
	min-width: 70px;
	padding: 8px 6px;
	font-size: .82em;
	text-align: center;
	background: #f2f2f2;
	color: var(--ccfs-mute, #666);
	border-radius: 3px;
	position: relative;
	counter-increment: ccfs-step;
}
.ccfs-step::before {
	content: counter(ccfs-step) ". ";
	font-weight: 700;
}
.ccfs-step.is-done {
	background: #d8e9b6;
	color: var(--ccfs-dark, #2a3a14);
}
.ccfs-step.is-current {
	background: var(--ccfs-green, #90cb22);
	color: #fff;
	font-weight: 600;
}

/* Eligibility block on step 1 */
.ccfs-elig {
	background: var(--ccfs-tint, #f5f9eb);
	padding: 12px 16px;
	border-radius: 3px;
	margin: 12px 0;
}
.ccfs-elig ul { margin: 6px 0 0 18px; }
.ccfs-elig li { margin-bottom: 4px; }

/* Pre-contract information block on consent step */
.ccfs-precontract {
	background: #fafafa;
	border: 1px solid var(--ccfs-line, #e3e3e3);
	border-radius: 3px;
	padding: 14px 16px;
	margin: 14px 0;
	max-height: 320px;
	overflow-y: auto;
	font-size: .92em;
}
.ccfs-precontract dl {
	display: grid;
	grid-template-columns: minmax(140px, 35%) 1fr;
	gap: 6px 14px;
	margin: 0;
}
.ccfs-precontract dt {
	font-weight: 600;
	color: var(--ccfs-dark, #2a3a14);
}
.ccfs-precontract dd { margin: 0; }

/* ----- Customer Portal ([ccfs_portal]) ----- */
.ccfs-portal {
	background: #fff;
	border: 1px solid var(--ccfs-line, #e3e3e3);
	border-radius: 4px;
	padding: 20px 22px;
	margin: 16px 0;
	box-shadow: var(--ccfs-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.ccfs-portal-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--ccfs-line, #e3e3e3);
}
.ccfs-portal-head h2 { margin: 0; }
.ccfs-portal-status {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 14px;
	font-size: .88em;
	font-weight: 600;
}
.ccfs-portal-panel {
	margin: 14px 0;
}
.ccfs-portal-panel h3 { margin-top: 0; }
.ccfs-portal-decline {
	background: #fdecea;
	border: 1px solid #f5c2bd;
	border-radius: 3px;
	padding: 12px 14px;
}
.ccfs-portal-help {
	background: var(--ccfs-tint, #f5f9eb);
	padding: 10px 14px;
	border-radius: 3px;
	margin-top: 18px;
	font-size: .92em;
}
.ccfs-portal-login {
	max-width: 480px;
	margin: 0 auto;
}
.ccfs-portal-err {
	background: #fdecea;
	border: 1px solid #f5c2bd;
	border-radius: 3px;
	padding: 8px 12px;
	margin: 10px 0;
}
.ccfs-portal-schedule {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
	font-size: .94em;
}
.ccfs-portal-schedule th,
.ccfs-portal-schedule td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--ccfs-line, #e3e3e3);
	text-align: left;
}
.ccfs-portal-schedule th {
	background: var(--ccfs-tint, #f5f9eb);
	font-weight: 600;
}
.ccfs-portal-schedule td.amt,
.ccfs-portal-schedule th.amt { text-align: right; font-variant-numeric: tabular-nums; }
.ccfs-portal-schedule tr.is-paid { color: var(--ccfs-mute, #666); }
.ccfs-portal-schedule tr.is-paid td { text-decoration: line-through; }

.ccfs-portal-dl {
	display: grid;
	grid-template-columns: minmax(160px, 35%) 1fr;
	gap: 6px 14px;
	margin: 0 0 14px;
}
.ccfs-portal-dl dt {
	font-weight: 600;
	color: var(--ccfs-dark, #2a3a14);
}
.ccfs-portal-dl dd { margin: 0; }

.ccfs-loan-balance {
	background: var(--ccfs-tint, #f5f9eb);
	padding: 14px 18px;
	border-radius: 4px;
	margin: 10px 0 18px;
}
.ccfs-loan-balance .amount {
	font-size: 1.8em;
	font-weight: 700;
	color: var(--ccfs-dark, #2a3a14);
	display: block;
}

/* Status pills — reused on the front-end portal and in admin lists. */
.ccfs-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: .82em;
	font-weight: 600;
	background: #eee;
	color: #444;
	line-height: 1.4;
}
.ccfs-status-received      { background: #e8edf5; color: #2c3e50; }
.ccfs-status-pending_id    { background: #fff1cc; color: #6b5400; }
.ccfs-status-pending_docs  { background: #fff1cc; color: #6b5400; }
.ccfs-status-under_review  { background: #e0e9f7; color: #244268; }
.ccfs-status-pending_sign  { background: #d0e8b9; color: #2f5708; }
.ccfs-status-approved      { background: #d4ecc4; color: #2f5708; }
.ccfs-status-declined      { background: #fdd6d2; color: #7a1e15; }
.ccfs-status-withdrawn     { background: #ececec; color: #555; }
.ccfs-status-funded        { background: #b8e08a; color: #2f5708; }
.ccfs-status-pending_drawdown { background: #fff1cc; color: #6b5400; }
.ccfs-status-active        { background: #b8e08a; color: #2f5708; }
.ccfs-status-in_arrears    { background: #fdd6d2; color: #7a1e15; }
.ccfs-status-paid          { background: #c4dff0; color: #1b4566; }
.ccfs-status-defaulted     { background: #fdd6d2; color: #7a1e15; }
.ccfs-status-written_off   { background: #ddd; color: #444; }

/* Document upload list (portal + admin) */
.ccfs-doc-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.ccfs-doc-list li {
	padding: 8px 10px;
	border-bottom: 1px solid var(--ccfs-line, #e3e3e3);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
}
.ccfs-doc-list li:last-child { border-bottom: 0; }
.ccfs-doc-kind {
	font-weight: 600;
	color: var(--ccfs-dark, #2a3a14);
}
.ccfs-doc-meta {
	font-size: .85em;
	color: var(--ccfs-mute, #666);
}

/* Small-screen tweaks */
@media (max-width: 640px) {
	.ccfs-step { flex-basis: 45%; }
	.ccfs-bl-cases { flex-direction: column; }
	.ccfs-calc-row { gap: 6px; }
	.ccfs-calc-l { min-width: 0; flex-basis: 100%; }
	.ccfs-portal-dl,
	.ccfs-precontract dl { grid-template-columns: 1fr; }
	.ccfs-portal-dl dt,
	.ccfs-precontract dt { margin-top: 6px; }
}

/* =====================================================================
 * v2.0.0 — accounts, tabbed portal, disclaimers, statement, tickets,
 *          chatbot, campaigns, LMS report helpers
 * All built on the brand variables declared above. No new colours
 * outside the existing palette; no external imports.
 * ===================================================================== */

/* ---------- shared utility primitives ------------------------------- */

.ccfs-btn{
	display:inline-block;
	padding:9px 16px;
	border-radius:6px;
	border:1px solid var(--ccfs-line);
	background:#fff;
	color:var(--ccfs-ink);
	font-family:var(--ccfs-font-sans);
	font-size:.95rem;
	font-weight:600;
	line-height:1.2;
	text-decoration:none;
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ccfs-btn:hover{ background:var(--ccfs-light); }
.ccfs-btn-primary{
	background:var(--ccfs-green);
	border-color:var(--ccfs-green-deep);
	color:#fff;
}
.ccfs-btn-primary:hover{ background:var(--ccfs-green-deep); color:#fff; }
.ccfs-btn-secondary{
	background:var(--ccfs-dark);
	border-color:var(--ccfs-dark-2);
	color:#fff;
}
.ccfs-btn-secondary:hover{ background:var(--ccfs-dark-2); color:#fff; }
.ccfs-btn-link{
	background:transparent;
	border-color:transparent;
	color:var(--ccfs-green-text);
	padding:6px 8px;
}
.ccfs-btn-link:hover{ background:var(--ccfs-light); }
.ccfs-btn-sm{ padding:5px 10px; font-size:.85rem; }
.ccfs-btn:disabled,
.ccfs-btn[aria-disabled="true"]{
	opacity:.55;
	cursor:not-allowed;
}

.ccfs-form-actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-top:18px;
	align-items:center;
}
.ccfs-form-label{
	display:block;
	font-weight:600;
	color:var(--ccfs-ink);
	margin:14px 0 6px;
	font-size:.92rem;
}
.ccfs-field-err{
	color:#b3261e;
	font-size:.85rem;
	margin:4px 0 0;
	font-weight:500;
}
.ccfs-notice{
	padding:12px 14px;
	border-radius:6px;
	border:1px solid var(--ccfs-line);
	background:var(--ccfs-light);
	color:var(--ccfs-ink);
	font-size:.95rem;
	margin:14px 0;
}
.ccfs-notice-success{
	border-color:var(--ccfs-green);
	background:#f2faea;
	color:var(--ccfs-green-text);
}
.ccfs-notice-warn{
	border-color:#d6a900;
	background:#fff8e0;
	color:#7a5e00;
}
.ccfs-success{
	color:var(--ccfs-green-text);
	font-weight:600;
}
.ccfs-empty{
	padding:18px;
	text-align:center;
	color:var(--ccfs-ink-soft);
	background:var(--ccfs-light);
	border-radius:6px;
	font-style:italic;
}
.ccfs-muted{ color:var(--ccfs-ink-soft); }

.ccfs-table{
	width:100%;
	border-collapse:collapse;
	font-size:.92rem;
	margin:10px 0 16px;
}
.ccfs-table th,
.ccfs-table td{
	text-align:left;
	padding:8px 10px;
	border-bottom:1px solid var(--ccfs-line);
	vertical-align:top;
}
.ccfs-table thead th{
	background:var(--ccfs-light);
	color:var(--ccfs-ink);
	font-weight:600;
	font-size:.85rem;
	text-transform:uppercase;
	letter-spacing:.04em;
}
.ccfs-table tbody tr:hover{ background:rgba(238,241,244,.5); }

/* ---------- customer accounts (register / login) -------------------- */

.ccfs-account{
	max-width:560px;
	margin:0 auto;
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:8px;
	padding:26px 28px;
	box-shadow:var(--ccfs-shadow-sm);
}
.ccfs-account h2{
	margin:0 0 4px;
	font-family:var(--ccfs-font-serif);
	color:var(--ccfs-dark);
}
.ccfs-account-lead{
	color:var(--ccfs-ink-soft);
	margin:0 0 18px;
	font-size:.95rem;
}
.ccfs-account-switch{
	display:flex;
	gap:0;
	border:1px solid var(--ccfs-line);
	border-radius:6px;
	overflow:hidden;
	margin-bottom:22px;
}
.ccfs-account-switch a{
	flex:1;
	text-align:center;
	padding:10px 12px;
	background:var(--ccfs-light);
	color:var(--ccfs-ink-soft);
	font-weight:600;
	text-decoration:none;
	font-size:.95rem;
	border-right:1px solid var(--ccfs-line);
}
.ccfs-account-switch a:last-child{ border-right:0; }
.ccfs-account-switch a.is-active{
	background:#fff;
	color:var(--ccfs-dark);
	box-shadow:inset 0 -2px 0 var(--ccfs-green);
}
.ccfs-account label{
	display:block;
	font-weight:600;
	font-size:.92rem;
	margin:12px 0 5px;
	color:var(--ccfs-ink);
}
.ccfs-account input[type="text"],
.ccfs-account input[type="email"],
.ccfs-account input[type="tel"],
.ccfs-account input[type="password"],
.ccfs-account input[type="date"],
.ccfs-account select{
	width:100%;
	padding:9px 11px;
	border:1px solid var(--ccfs-line);
	border-radius:5px;
	font-family:var(--ccfs-font-sans);
	font-size:.98rem;
	color:var(--ccfs-ink);
	background:#fff;
}
.ccfs-account input:focus,
.ccfs-account select:focus{
	border-color:var(--ccfs-green);
	outline:0;
	box-shadow:0 0 0 3px rgba(144,203,34,.18);
}
.ccfs-account-honeypot{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}
.ccfs-account-blocked{
	border-left:4px solid #b3261e;
	background:#fdecea;
	padding:14px 16px;
	border-radius:5px;
	color:#7a1d18;
	margin:18px 0;
}
.ccfs-account-help{
	font-size:.82rem;
	color:var(--ccfs-ink-soft);
	margin:4px 0 0;
}
.ccfs-account-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 18px;
}
.ccfs-account-grid > .ccfs-account-row-full{ grid-column:1 / -1; }

/* ---------- regulatory disclaimers ---------------------------------- */

.ccfs-disclaimer{
	font-size:.85rem;
	line-height:1.55;
	color:var(--ccfs-ink-soft);
	border:1px solid var(--ccfs-line);
	background:var(--ccfs-light);
	border-radius:5px;
	padding:11px 14px;
	margin:14px 0;
}
.ccfs-disclaimer p{ margin:0 0 6px; }
.ccfs-disclaimer p:last-child{ margin:0; }
.ccfs-disclaimer strong{ color:var(--ccfs-ink); }
.ccfs-disclaimer-short{
	font-style:italic;
	font-size:.82rem;
	border:0;
	background:transparent;
	padding:6px 0;
	margin:6px 0 0;
}
.ccfs-disclaimer-calc{
	border-left:3px solid var(--ccfs-green);
	background:#f7fcef;
	color:var(--ccfs-ink);
	font-style:normal;
}
.ccfs-disclaimer-marketing,
.ccfs-disclaimer-application{
	border:1px solid var(--ccfs-line);
	background:#fff;
	color:var(--ccfs-ink);
	padding:16px 18px;
	font-size:.88rem;
}
.ccfs-disclaimer-marketing h3,
.ccfs-disclaimer-application h3{
	margin:0 0 8px;
	font-size:1.02rem;
	color:var(--ccfs-dark);
	font-family:var(--ccfs-font-serif);
}
.ccfs-disclaimer-consent{
	border-left:3px solid var(--ccfs-dark);
	background:#fff;
	font-size:.86rem;
	color:var(--ccfs-ink);
	padding:12px 14px;
}
.ccfs-disclaimer-footer{
	margin:18px 0 6px;
	padding:14px 16px;
	border:1px solid var(--ccfs-line);
	border-radius:5px;
	background:#fafbfc;
	font-size:.78rem;
	line-height:1.55;
	color:var(--ccfs-ink-soft);
}
.ccfs-disclaimer-footer strong{ color:var(--ccfs-ink); }
.ccfs-disclaimer-statement{
	border:1px solid var(--ccfs-line);
	background:#fff;
	font-size:.78rem;
	color:var(--ccfs-ink-soft);
	padding:10px 12px;
	margin-top:18px;
}
.ccfs-reg-strip{
	margin-top:22px;
	padding-top:14px;
	border-top:1px solid var(--ccfs-line);
	font-size:.78rem;
	font-style:italic;
	color:var(--ccfs-ink-soft);
	line-height:1.55;
}

/* ---------- tabbed portal (v2) -------------------------------------- */

.ccfs-portal2{
	max-width:1080px;
	margin:0 auto;
}
.ccfs-portal2-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:14px;
	flex-wrap:wrap;
	margin-bottom:14px;
}
.ccfs-portal2-head h2{
	margin:0;
	font-family:var(--ccfs-font-serif);
	color:var(--ccfs-dark);
	font-size:1.5rem;
}
.ccfs-portal2-head p{ margin:2px 0 0; color:var(--ccfs-ink-soft); font-size:.92rem; }
.ccfs-portal2-head-actions{ display:flex; gap:8px; align-items:center; }
.ccfs-portal2-tabs{
	display:flex;
	gap:0;
	border-bottom:1px solid var(--ccfs-line);
	margin:0 0 22px;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.ccfs-portal2-tabs a{
	display:inline-block;
	padding:10px 14px;
	color:var(--ccfs-ink-soft);
	text-decoration:none;
	font-weight:600;
	font-size:.92rem;
	border-bottom:2px solid transparent;
	white-space:nowrap;
}
.ccfs-portal2-tabs a:hover{ color:var(--ccfs-ink); }
.ccfs-portal2-tabs a.is-active{
	color:var(--ccfs-dark);
	border-bottom-color:var(--ccfs-green);
}
.ccfs-portal2-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:18px;
}
.ccfs-portal2-card{
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:8px;
	padding:18px 20px;
	box-shadow:var(--ccfs-shadow-sm);
	display:flex;
	flex-direction:column;
}
.ccfs-portal2-card-loan{ border-top:3px solid var(--ccfs-green); }
.ccfs-portal2-card-apply{ border-top:3px solid var(--ccfs-dark); }
.ccfs-portal2-card-tips{ background:var(--ccfs-light); border-color:var(--ccfs-line); }
.ccfs-portal2-card-tickets{ border-top:3px solid #c98700; }
.ccfs-portal2-card-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	margin-bottom:8px;
}
.ccfs-portal2-card-head h3{
	margin:0;
	font-size:1.05rem;
	color:var(--ccfs-dark);
	font-family:var(--ccfs-font-serif);
}
.ccfs-portal2-card-lead{
	color:var(--ccfs-ink-soft);
	font-size:.9rem;
	margin:0 0 12px;
}
.ccfs-portal2-stats{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px 18px;
	margin:0 0 14px;
}
.ccfs-portal2-stats dt{
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--ccfs-ink-soft);
	margin:0;
}
.ccfs-portal2-stats dd{
	margin:1px 0 0;
	font-weight:600;
	color:var(--ccfs-ink);
	font-size:.95rem;
}
.ccfs-portal2-amount{
	font-family:var(--ccfs-font-serif);
	font-size:1.6rem;
	color:var(--ccfs-dark);
	margin:2px 0 4px;
	line-height:1.1;
}
.ccfs-portal2-card-foot{
	margin-top:auto;
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	padding-top:14px;
}

/* ---------- loan schedule ------------------------------------------- */

.ccfs-sched{ width:100%; border-collapse:collapse; font-size:.92rem; }
.ccfs-sched th,
.ccfs-sched td{
	padding:8px 10px;
	border-bottom:1px solid var(--ccfs-line);
	text-align:left;
}
.ccfs-sched thead th{
	background:var(--ccfs-light);
	font-size:.82rem;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--ccfs-ink);
}
.ccfs-sched-row-paid td{
	color:var(--ccfs-ink-soft);
	text-decoration:line-through;
}
.ccfs-sched-row-due td{ color:var(--ccfs-ink); }
.ccfs-sched-row-overdue td{
	background:#fdecea;
	color:#7a1d18;
	font-weight:600;
}
.ccfs-sched-tot th,
.ccfs-sched-tot td{
	background:var(--ccfs-light);
	font-weight:700;
	color:var(--ccfs-dark);
	border-top:2px solid var(--ccfs-line);
}

/* ---------- statement of borrowing ---------------------------------- */

.ccfs-statement{
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:6px;
	padding:28px 32px;
	max-width:880px;
	margin:0 auto;
	box-shadow:var(--ccfs-shadow-sm);
}
.ccfs-statement-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:14px;
	flex-wrap:wrap;
	padding-bottom:14px;
	border-bottom:2px solid var(--ccfs-dark);
	margin-bottom:18px;
}
.ccfs-statement-head h2{
	margin:0;
	font-family:var(--ccfs-font-serif);
	color:var(--ccfs-dark);
	font-size:1.45rem;
}
.ccfs-statement-head .ccfs-statement-meta{
	font-size:.82rem;
	color:var(--ccfs-ink-soft);
	text-align:right;
}
.ccfs-statement-meta strong{ display:block; color:var(--ccfs-ink); font-size:.9rem; }
.ccfs-statement-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px 28px;
	margin-bottom:22px;
}
.ccfs-statement-grid h4{
	margin:0 0 6px;
	font-size:.78rem;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--ccfs-ink-soft);
	font-family:var(--ccfs-font-sans);
}
.ccfs-statement-grid p{ margin:0; line-height:1.5; font-size:.92rem; color:var(--ccfs-ink); }
.ccfs-statement-body{ margin:18px 0; }
.ccfs-statement-body h3{
	margin:14px 0 8px;
	font-size:1.02rem;
	font-family:var(--ccfs-font-serif);
	color:var(--ccfs-dark);
}
.ccfs-statement-foot{
	margin-top:22px;
	padding-top:14px;
	border-top:1px solid var(--ccfs-line);
	font-size:.78rem;
	color:var(--ccfs-ink-soft);
	line-height:1.55;
}
.ccfs-statement-actions{
	display:flex;
	gap:10px;
	margin-bottom:14px;
	flex-wrap:wrap;
}

@media print{
	body * { visibility:hidden !important; }
	.ccfs-statement, .ccfs-statement *{ visibility:visible !important; }
	.ccfs-statement{
		position:absolute;
		left:0; top:0;
		width:100%;
		max-width:none;
		margin:0;
		padding:14mm 18mm;
		box-shadow:none;
		border:0;
		font-size:11pt;
	}
	.ccfs-statement-actions,
	.ccfs-portal2-tabs,
	.ccfs-portal2-head-actions,
	.ccfs-btn,
	.ccfs-reg-strip,
	.ccfs-disclaimer-short{ display:none !important; }
	a[href]:after{ content:""; }
}

/* ---------- support tickets & chatbot ------------------------------- */

.ccfs-chatbot{
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:8px;
	padding:18px 20px;
	max-width:760px;
}
.ccfs-chatbot-stream{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-bottom:14px;
}
.ccfs-chatbot-msg{
	max-width:88%;
	padding:10px 13px;
	border-radius:10px;
	font-size:.93rem;
	line-height:1.45;
}
.ccfs-chatbot-msg-bot{
	background:var(--ccfs-light);
	color:var(--ccfs-ink);
	align-self:flex-start;
	border-bottom-left-radius:2px;
}
.ccfs-chatbot-msg-you{
	background:var(--ccfs-green);
	color:#fff;
	align-self:flex-end;
	border-bottom-right-radius:2px;
}
.ccfs-chatbot-msg-body p{ margin:0 0 6px; }
.ccfs-chatbot-msg-body p:last-child{ margin:0; }
.ccfs-chatbot-msg-body ul{ margin:6px 0 0 18px; padding:0; }
.ccfs-chatbot-choices{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:6px 0 14px;
}
.ccfs-chip{
	display:inline-block;
	padding:8px 14px;
	border-radius:999px;
	border:1px solid var(--ccfs-line);
	background:#fff;
	font-size:.88rem;
	font-weight:600;
	color:var(--ccfs-ink);
	text-decoration:none;
	cursor:pointer;
}
.ccfs-chip:hover{ background:var(--ccfs-light); }
.ccfs-chip-yes{ border-color:var(--ccfs-green); color:var(--ccfs-green-text); }
.ccfs-chip-yes:hover{ background:#f2faea; }
.ccfs-chip-no{ border-color:var(--ccfs-line); color:var(--ccfs-ink-soft); }
.ccfs-chatbot-actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-top:14px;
	padding-top:14px;
	border-top:1px solid var(--ccfs-line);
}
.ccfs-chatbot-faqs{
	background:var(--ccfs-light);
	border-radius:6px;
	padding:10px 14px;
	margin-top:10px;
	font-size:.9rem;
}
.ccfs-chatbot-faqs h4{
	margin:0 0 6px;
	font-size:.82rem;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--ccfs-ink-soft);
}
.ccfs-chatbot-faqs ul{ margin:0; padding-left:18px; }
.ccfs-chatbot-faqs li{ margin:2px 0; }

.ccfs-ticket-list-head{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:12px;
	margin-bottom:10px;
}
.ccfs-table-tickets td.ccfs-table-tickets-ref{ font-family:var(--ccfs-font-mono); font-size:.85rem; }
.ccfs-table-tickets td.ccfs-table-tickets-subject a{ color:var(--ccfs-ink); font-weight:600; }
.ccfs-ticket-status{
	display:inline-block;
	padding:2px 9px;
	border-radius:999px;
	font-size:.74rem;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.04em;
	border:1px solid var(--ccfs-line);
	background:var(--ccfs-light);
	color:var(--ccfs-ink-soft);
}
.ccfs-ticket-status-open{ background:#fff8e0; border-color:#d6a900; color:#7a5e00; }
.ccfs-ticket-status-awaiting_customer{ background:#e6f0fc; border-color:#3a76c2; color:#1f4a86; }
.ccfs-ticket-status-awaiting_support{ background:#fff8e0; border-color:#d6a900; color:#7a5e00; }
.ccfs-ticket-status-resolved{ background:#f2faea; border-color:var(--ccfs-green); color:var(--ccfs-green-text); }
.ccfs-ticket-status-closed{ background:var(--ccfs-light); border-color:var(--ccfs-line); color:var(--ccfs-ink-soft); }

.ccfs-ticket{
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:8px;
	padding:18px 20px;
	max-width:820px;
}
.ccfs-ticket-head{
	display:flex;
	justify-content:space-between;
	gap:12px;
	align-items:baseline;
	flex-wrap:wrap;
	border-bottom:1px solid var(--ccfs-line);
	padding-bottom:10px;
	margin-bottom:14px;
}
.ccfs-ticket-head h3{ margin:0; font-family:var(--ccfs-font-serif); color:var(--ccfs-dark); }
.ccfs-ticket-ref{ font-family:var(--ccfs-font-mono); font-size:.85rem; color:var(--ccfs-ink-soft); }
.ccfs-ticket-thread{ display:flex; flex-direction:column; gap:10px; }
.ccfs-ticket-msg{
	border:1px solid var(--ccfs-line);
	border-radius:6px;
	padding:10px 14px;
	background:#fff;
}
.ccfs-ticket-msg-customer{ background:#f7fcef; border-color:var(--ccfs-green); }
.ccfs-ticket-msg-support{ background:#fafbfc; }
.ccfs-ticket-msg-meta{
	font-size:.78rem;
	color:var(--ccfs-ink-soft);
	margin-bottom:5px;
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.ccfs-ticket-msg-meta strong{ color:var(--ccfs-ink); }
.ccfs-ticket-msg-body{
	color:var(--ccfs-ink);
	font-size:.94rem;
	line-height:1.5;
	white-space:pre-wrap;
}
.ccfs-ticket-reply{ margin-top:18px; padding-top:14px; border-top:1px solid var(--ccfs-line); }
.ccfs-ticket-reply textarea{
	width:100%;
	min-height:120px;
	padding:10px;
	border:1px solid var(--ccfs-line);
	border-radius:5px;
	font-family:var(--ccfs-font-sans);
	font-size:.95rem;
	color:var(--ccfs-ink);
}
.ccfs-ticket-form select,
.ccfs-ticket-form input[type="text"],
.ccfs-ticket-form textarea{
	width:100%;
	padding:9px 11px;
	border:1px solid var(--ccfs-line);
	border-radius:5px;
	font-family:var(--ccfs-font-sans);
	font-size:.95rem;
	color:var(--ccfs-ink);
	background:#fff;
}
.ccfs-ticket-form textarea{ min-height:140px; }

/* ---------- repayment change form ----------------------------------- */

.ccfs-repay{
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:8px;
	padding:18px 20px;
	max-width:760px;
}
.ccfs-repay-summary{
	background:var(--ccfs-light);
	border-radius:6px;
	padding:12px 14px;
	margin-bottom:14px;
	font-size:.93rem;
	color:var(--ccfs-ink);
}
.ccfs-repay-summary dl{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:4px 14px;
	margin:0;
}
.ccfs-repay-summary dt{ color:var(--ccfs-ink-soft); }
.ccfs-repay-summary dd{ margin:0; font-weight:600; }
.ccfs-repay-rules{
	font-size:.85rem;
	color:var(--ccfs-ink-soft);
	background:var(--ccfs-light);
	border-radius:5px;
	padding:10px 12px;
	margin-top:10px;
}
.ccfs-repay-rules ul{ margin:5px 0 0 18px; padding:0; }

/* ---------- apply panel (within portal) ----------------------------- */

.ccfs-apply-panel{
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:8px;
	padding:22px 24px;
	max-width:760px;
}
.ccfs-apply-blocked{
	border-left:4px solid #b3261e;
	background:#fdecea;
	padding:14px 16px;
	border-radius:5px;
	color:#7a1d18;
	margin:14px 0;
}
.ccfs-apply-blocked h4{ margin:0 0 6px; color:#7a1d18; }
.ccfs-apply-blocked ul{ margin:6px 0 0 18px; padding:0; }

/* ---------- contact details ----------------------------------------- */

.ccfs-contact-form{
	background:#fff;
	border:1px solid var(--ccfs-line);
	border-radius:8px;
	padding:20px 24px;
	max-width:680px;
}
.ccfs-contact-form .ccfs-account-grid{ margin-top:6px; }

/* ---------- responsive ---------------------------------------------- */

@media (max-width: 740px){
	.ccfs-portal2-grid{ grid-template-columns:1fr; }
	.ccfs-account-grid{ grid-template-columns:1fr; }
	.ccfs-statement-grid{ grid-template-columns:1fr; }
	.ccfs-portal2-tabs{ font-size:.88rem; }
	.ccfs-portal2-tabs a{ padding:9px 10px; }
	.ccfs-statement{ padding:18px 18px; }
	.ccfs-statement-head{ flex-direction:column; align-items:flex-start; }
	.ccfs-statement-head .ccfs-statement-meta{ text-align:left; }
	.ccfs-account{ padding:20px 18px; }
	.ccfs-table-tickets{ font-size:.82rem; }
	.ccfs-portal2-head{ align-items:flex-start; flex-direction:column; }
}