/**
 * TEST ONLY — the main site's (payping theme) footer, scoped port.
 *
 * Extracted from the theme's footer-one rules (style.css + responsive.css)
 * plus the bootstrap grid/utility subset the footer markup uses. Everything
 * is prefixed with .csh-main-footer so nothing leaks onto the help content
 * above. The bootstrap-icons @font-face lives in the footer-main-test.php
 * partial (its src URL points into the active theme and needs PHP).
 *
 * @package HelpCenter
 */

.csh-main-footer { font-size: 16px; line-height: 1.8; color: #fff; }
.csh-main-footer p { margin: 0 0 10px; }
.csh-main-footer img { max-width: 100%; height: auto; }

/* Bootstrap's reboot cornerstone the grid above depends on. Without
 * border-box, width:100% plus the 12px inline paddings stack, and every
 * container/col overflows its parent 24px per side (measured on the ported
 * page: scrollWidth = viewport + 48). */
.csh-main-footer,
.csh-main-footer *,
.csh-main-footer *::before,
.csh-main-footer *::after { box-sizing: border-box; }

/* The landing wraps the whole page (footer included) in .main-page-wrapper
 * { overflow-x: hidden } and its one-line bank-logo row leans on that clip
 * below ~375px. Scope the same guard to the footer here so the help page
 * never grows a horizontal scrollbar. */
.csh-main-footer { overflow-x: clip; }

/* Bootstrap container / row / col subset (RTL logical properties) */
.csh-main-footer .container { width: 100%; margin-inline: auto; padding-inline: 12px; }
.csh-main-footer .row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.csh-main-footer .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-inline: 12px; }
@media (min-width: 576px) {
	.csh-main-footer .container { max-width: 540px; }
	.csh-main-footer .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
}
@media (min-width: 768px) {
	.csh-main-footer .container { max-width: 720px; }
	.csh-main-footer .col-md-6 { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) {
	.csh-main-footer .container { max-width: 960px; }
	.csh-main-footer .col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
	.csh-main-footer .col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
	.csh-main-footer .order-lg-first { order: -1; }
	.csh-main-footer .order-lg-last { order: 13; }
	.csh-main-footer .d-lg-none { display: none; }
	.csh-main-footer .d-lg-inline-block { display: inline-block; }
}
@media (min-width: 1200px) {
	.csh-main-footer .container { max-width: 1140px; }
	.csh-main-footer .col-xl-2 { flex: 0 0 auto; width: 16.6667%; }
	.csh-main-footer .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
	.csh-main-footer .d-xl-flex { display: flex; }
	.csh-main-footer .me-xl-4 { margin-inline-end: 1.5rem; }
}
@media (min-width: 1400px) {
	.csh-main-footer .container { max-width: 1320px; }
}
@media (max-width: 1199px) {
	.csh-main-footer .lg-mt-10 { margin-top: 10px; }
}

/* Bootstrap utility subset used by the footer markup */
.csh-main-footer .d-flex { display: flex; }
.csh-main-footer .d-inline-block { display: inline-block; }
.csh-main-footer .d-none { display: none; }
.csh-main-footer .align-items-center { align-items: center; }
.csh-main-footer .justify-content-between { justify-content: space-between; }
.csh-main-footer .flex-wrap { flex-wrap: wrap; }
.csh-main-footer .text-white { color: #fff; }
.csh-main-footer .opacity-50 { opacity: .5; }
.csh-main-footer .lh-sm { line-height: 1.25; }
.csh-main-footer .mb-15 { margin-bottom: 15px; }
.csh-main-footer .mb-20 { margin-bottom: 20px; }
.csh-main-footer .mb-25 { margin-bottom: 25px; }
.csh-main-footer .mb-30 { margin-bottom: 30px; }
.csh-main-footer .mb-35 { margin-bottom: 35px; }
.csh-main-footer .style-none { list-style: none; padding: 0; margin: 0; }

/* Payping theme footer-one visual rules. The landing's effective colors come
 * from the theme's ROOT style.css (loaded there via the payping-style handle,
 * after the bundle): #101010 background, navy social hover, white namad
 * tiles — not the #0C3A30 values in style.min.css. */
.csh-main-footer .footer-one { background: #101010; padding-top: 95px; }
.csh-main-footer .footer-one .footer-title { font-size: 24px; color: #fff; margin-bottom: 15px; }
.csh-main-footer .footer-one .footer-nav-link a { color: rgba(255, 255, 255, .7); line-height: 46px; transition: color .2s ease-in-out 0s; }
.csh-main-footer .footer-one .footer-nav-link a:hover { color: #fff; }
.csh-main-footer .footer-one .social-icon a { color: #fff; font-size: 18px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-left: 10px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: all .2s ease-in-out 0s; }
.csh-main-footer .footer-one .social-icon a:hover { background-color: #000080; color: #fff; }
.csh-main-footer .footer-one .bottom-footer { border-top: 1px dashed rgba(255, 255, 255, .25); margin-top: 32px; padding: 40px 0 25px; }
.csh-main-footer .footer-one .copyright { font-size: 18px; color: rgba(255, 255, 255, .7); }
.csh-main-footer .footer-contact p { color: rgba(255, 255, 255, .7); font-size: 16px; }
.csh-main-footer .fs-16 { font-size: 16px !important; }
.csh-main-footer .namad-icons { justify-content: space-between; }
.csh-main-footer .namad-icons img { height: 75px; }
.csh-main-footer .footer-namad-icons li { background: #fff; text-align: center; border-radius: 10px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; height: 100px; }
.csh-main-footer .footer-namad-icons li img { height: 80px; cursor: pointer; }

@media (max-width: 1199px) {
	.csh-main-footer .footer-one { padding-top: 60px; }
	.csh-main-footer .footer-one .footer-title { font-size: 22px; margin-bottom: 12px; }
}
@media (max-width: 991px) {
	.csh-main-footer .footer-one .footer-nav-link a { line-height: 40px; }
	.csh-main-footer .footer-one .bottom-footer { text-align: center; }
}
@media (max-width: 768px) {
	.csh-main-footer .namad-icons img { height: 40px; }
	.csh-main-footer .footer-namad-icons { display: flex; justify-content: space-between; }
	.csh-main-footer .footer-namad-icons li { width: 30%; }
}

/* Bootstrap-icons glyph codes for the social row */
.csh-main-footer .bi::before,
.csh-main-footer [class^="bi-"]::before,
.csh-main-footer [class*=" bi-"]::before { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: inherit; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; -webkit-font-smoothing: antialiased; }
.csh-main-footer .bi-telegram::before { content: "\f5b3"; }
.csh-main-footer .bi-twitter::before { content: "\f5ef"; }
.csh-main-footer .bi-instagram::before { content: "\f437"; }
.csh-main-footer .bi-linkedin::before { content: "\f472"; }
.csh-main-footer .bi-github::before { content: "\f3ed"; }