/**
 * Modern Footer Override — OPC070174-1
 * Soft, clean, usable layout matching the top bar.
 * Rollback: remove footer-modern.css link from header.tpl
 */

:root {
	--ff-page: #f4f6f9;
	--ff-surface: #ffffff;
	--ff-ink: #1f2a37;
	--ff-text: #4b5563;
	--ff-muted: #7a8698;
	--ff-line: #e6ebf2;
	--ff-blue: #2f6fbf;
	--ff-blue-soft: #eaf2fb;
	--ff-yellow: #ffd200;
	--ff-radius: 14px;
	--ff-shadow: 0 8px 24px rgba(24, 39, 75, 0.06);
	--ff-transition: 0.2s ease;
}

/* ========== SHELL ========== */
footer {
	color: var(--ff-text);
	margin-top: 48px;
	position: relative;
	z-index: 1;
	background: var(--ff-page);
}

#footer {
	clear: both;
	background-color: var(--ff-page) !important;
	background-image: none !important;
	padding: 40px 0 0 !important;
	border-top: 1px solid var(--ff-line);
	min-height: 100px;
	color: var(--ff-text) !important;
	overflow: visible !important;
}

#footer .container {
	padding-left: 15px !important;
	padding-right: 15px !important;
	max-width: 1170px;
}

#footer > .container > .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-left: -14px;
	margin-right: -14px;
}

#footer > .container > .row > [class*="col-"] {
	padding-left: 14px;
	padding-right: 14px;
	float: none;
}

#footer .col-sm-6 > .row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}

#footer .col-sm-6 > .row > [class*="col-"] {
	padding-left: 10px;
	padding-right: 10px;
	float: none;
}

#footer .column,
#footer .col-sm-3.column.first,
#footer .col-sm-3.column.fourth {
	width: auto !important;
	padding: 0 !important;
	margin: 0 0 28px !important;
	border: 0 !important;
	float: none !important;
}

#footer #footer_cms_block {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	float: none !important;
	line-height: 1.5 !important;
}

/* ========== BRAND ========== */
.tm-about-logo {
	margin: 0 0 14px !important;
}

.tm-about-logo a,
footer .footer-logo {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px 14px !important;
	background: var(--ff-surface) !important;
	border: 1px solid var(--ff-line) !important;
	border-radius: 12px !important;
	box-shadow: var(--ff-shadow);
	line-height: 0;
}

.tm-about-logo .footer_logo,
.tm-about-logo img {
	max-width: 168px;
	height: auto;
	filter: none !important;
	opacity: 1 !important;
}

.tm-about-description {
	margin: 0 0 16px !important;
	color: var(--ff-text) !important;
}

.tm-about-description p {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
	color: var(--ff-text) !important;
}

.tm-about-description a {
	display: inline !important;
	color: var(--ff-blue) !important;
	font-size: inherit !important;
	font-weight: 600;
	text-decoration: none !important;
}

.tm-about-description a:hover {
	color: #1e5fbf !important;
	text-decoration: underline !important;
}

#footer hr {
	border: 0 !important;
	border-top: 1px solid var(--ff-line) !important;
	margin: 16px 0 !important;
	opacity: 1;
}

/* ========== SOCIAL ========== */
.social-area h2 {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ff-ink) !important;
	background: none !important;
	border: 0 !important;
}

.social-area ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.social-area ul li {
	float: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

.social-area ul li a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--ff-surface) !important;
	border: 1px solid var(--ff-line) !important;
	color: var(--ff-ink) !important;
	font-size: 15px !important;
	box-shadow: 0 1px 2px rgba(24, 39, 75, 0.04);
	transition: background var(--ff-transition), border-color var(--ff-transition), color var(--ff-transition), transform var(--ff-transition), box-shadow var(--ff-transition);
}

.social-area ul li a:hover {
	background: var(--ff-blue) !important;
	border-color: var(--ff-blue) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(47, 111, 191, 0.22);
}

.social-area ul li i {
	font-size: 15px !important;
	line-height: 1;
	color: inherit !important;
	margin: 0 !important;
	position: static !important;
	top: auto !important;
}

/* ========== HEADINGS ========== */
footer h5,
#footer h5 {
	margin: 4px 0 14px !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ff-ink) !important;
	background: none !important;
	border: 0 !important;
	display: block;
	line-height: 1.3 !important;
	position: relative;
}

footer h5::after,
#footer h5::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-top: 8px;
	border-radius: 3px;
	background: var(--ff-yellow);
}

/* ========== LINK LISTS ========== */
footer a,
footer p {
	color: var(--ff-text);
	font-size: 13px;
}

#footer .column ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#footer .column:not(.support-area) li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#footer .column:not(.support-area) li a {
	display: block !important;
	padding: 7px 0 !important;
	color: var(--ff-text) !important;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.35 !important;
	text-decoration: none !important;
	background: none !important;
	border: 0 !important;
	transition: color var(--ff-transition), padding-left var(--ff-transition);
}

#footer .column:not(.support-area) li a::before {
	content: none !important;
	display: none !important;
}

#footer .column:not(.support-area) li a:hover {
	color: var(--ff-blue) !important;
	padding-left: 4px !important;
	transform: none;
}

/* ========== SUPPORT / CONTACT ========== */
.support-area ul {
	margin: 0 !important;
	padding: 0 !important;
}

.support-area ul li {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	clear: none !important;
	width: auto !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 13px !important;
}

.support-area ul li:hover {
	background: transparent !important;
	border: 0 !important;
}

.support-area .d-left {
	float: none !important;
	flex: 0 0 34px;
	width: 34px !important;
	height: 34px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--ff-blue-soft);
	margin: 1px 0 0 !important;
}

.support-area .d-left i,
.support-area ul li i {
	float: none !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--ff-blue) !important;
	line-height: 1;
	position: static !important;
	top: auto !important;
}

.support-area .d-right {
	float: none !important;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ff-ink) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: 500;
}

.support-area .d-right span {
	display: block !important;
	margin: 0 0 2px !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ff-muted) !important;
}

.support-area ul li a::before {
	display: none !important;
}

/* ========== ETBIS ========== */
#ETBIS {
	margin-top: 18px;
}

#ETBIS a {
	display: inline-block !important;
	line-height: 0;
}

#ETBIS img {
	width: 84px !important;
	height: auto !important;
	border-radius: 10px;
	background: #fff;
	padding: 6px;
	border: 1px solid var(--ff-line);
	box-shadow: var(--ff-shadow);
}

/* ========== BANK BANNER ========== */
#footer .bank-banner {
	display: block;
	width: auto !important;
	max-width: min(860px, calc(100% - 30px));
	height: auto !important;
	margin: 8px auto 0 !important;
	padding: 16px 20px;
	background: var(--ff-surface) !important;
	border: 1px solid var(--ff-line);
	border-radius: 16px;
	box-shadow: var(--ff-shadow);
}

/* ========== COPYRIGHT ========== */
.copyright-container.container {
	max-width: 1170px;
	margin: 28px auto 0 !important;
	padding: 16px 15px 22px !important;
	border-top: 1px solid var(--ff-line);
	background: transparent !important;
}

.footer-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 18px;
	width: 100%;
}

#bottomfooter {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

#bottomfooter > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#bottomfooter > ul > li {
	float: none !important;
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

#bottomfooter > ul > li:not(.last)::after {
	content: "";
	width: 3px;
	height: 3px;
	margin: 0 10px;
	border-radius: 50%;
	background: #c5ceda;
}

#bottomfooter > ul > li a {
	color: var(--ff-muted) !important;
	font-size: 12px !important;
	font-weight: 500;
	padding: 4px 0;
	transition: color var(--ff-transition);
}

#bottomfooter > ul > li a:hover {
	color: var(--ff-blue) !important;
}

.powered {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right !important;
	color: var(--ff-muted) !important;
	font-size: 12px !important;
	line-height: 1.45;
}

.powered a {
	display: inline !important;
	color: var(--ff-blue) !important;
	font-size: inherit !important;
}

.content_footer_bottom {
	width: 100%;
	margin-top: 6px;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 992px) {
	#footer > .container > .row > .col-sm-3.column.first {
		flex: 0 0 26%;
		max-width: 26%;
	}

	#footer > .container > .row > .col-sm-6 {
		flex: 0 0 48%;
		max-width: 48%;
	}

	#footer > .container > .row > .col-sm-3.column.fourth {
		flex: 0 0 26%;
		max-width: 26%;
	}

	#footer .col-sm-6 > .row > .col-sm-7 {
		flex: 0 0 58%;
		max-width: 58%;
	}

	#footer .col-sm-6 > .row > .col-sm-5 {
		flex: 0 0 42%;
		max-width: 42%;
	}
}

@media (max-width: 991px) {
	#footer {
		padding-top: 32px !important;
	}

	#footer > .container > .row > [class*="col-"],
	#footer .col-sm-6 > .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.footer-container {
		flex-direction: column;
		align-items: flex-start;
	}

	#bottomfooter,
	.powered {
		text-align: left !important;
		width: 100%;
	}
}

@media (max-width: 767px) {
	#footer {
		padding-top: 24px !important;
		margin-bottom: 56px;
	}

	.tm-about-logo a,
	footer .footer-logo {
		padding: 8px 12px !important;
	}

	#footer .bank-banner {
		padding: 12px 14px;
		border-radius: 12px;
	}

	.copyright-container.container {
		margin-top: 20px !important;
		padding: 14px 15px 18px !important;
	}
}