/* ==========================================================================
   CPP demo brand chrome — GP strip + dark sticky header + dark footer.
   Values lifted from chinapaymentsplugin.com (index.html) for a pixel match.
   ========================================================================== */

/* The Elementor header/footer templates wrap our chrome in section > column >
   widget. Zero those out so the chrome sits edge-to-edge. */
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-header .elementor-widget-container,
.elementor-location-footer .elementor-widget-shortcode,
.elementor-location-footer .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
.elementor-location-header .elementor-section,
.elementor-location-footer .elementor-section { padding: 0 !important; }

/* ----- DEMO / SANDBOX BAR ----- */
.cpp-demobar { background: #030712; color: #cbd2e0; font-family: 'Inter', sans-serif; font-size: .8rem; border-bottom: 1px solid #1f2937; }
.cpp-demobar-inner { max-width: 80rem; margin: 0 auto; padding: .5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cpp-demobar-left { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cpp-testpill { display: inline-flex; align-items: center; gap: .35rem; background: #F59E0B; color: #1a1205; font-weight: 800; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .55rem; border-radius: .3rem; white-space: nowrap; }
.cpp-testpill .cpp-pulse { width: .4rem; height: .4rem; background: #1a1205; }
.cpp-demobar-note { color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpp-demobar-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.cpp-copy { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.06); border: 1px solid #374151; color: #e5e7eb; border-radius: .45rem; padding: .3rem .6rem; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .78rem; transition: background .15s, border-color .15s; }
.cpp-copy:hover { background: rgba(255,255,255,.12); border-color: #6573E8; }
.cpp-copy strong { font-weight: 700; letter-spacing: .02em; }
.cpp-copy-ico { opacity: .65; flex-shrink: 0; }
.cpp-copy-done { display: none; color: #34d399; font-weight: 700; white-space: nowrap; }
.cpp-copy.is-copied .cpp-copy-text, .cpp-copy.is-copied .cpp-copy-ico { display: none; }
.cpp-copy.is-copied .cpp-copy-done { display: inline; }
.cpp-reset { color: #9ca3af; text-decoration: none; white-space: nowrap; }
.cpp-reset:hover { color: #8C99FE; }

/* ----- DARK STICKY HEADER ----- */
.cpp-header { position: sticky; top: 0; z-index: 50; background: rgba(17,24,39,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cpp-nav { max-width: 80rem; margin: 0 auto; padding: 0 1rem; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.cpp-brand { display: inline-flex; align-items: center; gap: .55rem; }
.cpp-logo { height: 32px !important; width: auto !important; max-width: none !important; display: block; }
.cpp-demobadge { display: inline-flex; align-items: center; background: rgba(101,115,232,.18); color: #A8B0FE; border: 1px solid rgba(140,153,254,.4); font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .42rem; border-radius: .3rem; }
.cpp-getplugin { color: #9ca3af !important; }
.cpp-getplugin:hover { color: #8C99FE !important; }
.cpp-nav-links { display: flex; align-items: center; gap: 1.75rem; }
.cpp-nav-link { font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 500; color: #d1d5db; text-decoration: none; transition: color .15s; white-space: nowrap; }
.cpp-nav-link:hover { color: #8C99FE; }
.cpp-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; background: #6573E8; color: #fff !important; font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 600; border-radius: .5rem; text-decoration: none; transition: background .15s; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.cpp-btn-primary:hover { background: #4F5BCC; }
.cpp-nav-toggle { display: none; background: none; border: 0; color: #d1d5db; padding: .5rem; cursor: pointer; }
.cpp-nav-toggle:hover { color: #8C99FE; }
.cpp-mobile-menu { display: none; flex-direction: column; gap: .75rem; padding: 0 1rem 1rem; background: rgba(17,24,39,.98); }
.cpp-mobile-menu.open { display: flex; }
.cpp-mobile-menu .cpp-nav-link { padding: .25rem 0; }

@media (max-width: 860px) {
	.cpp-nav-links { display: none; }
	.cpp-nav-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
	.cpp-demobar-note { display: none; }
	.cpp-demobar-inner { padding: .45rem 1rem; gap: .4rem .75rem; flex-wrap: wrap; justify-content: flex-start; }
	.cpp-copy { font-size: .72rem; padding: .28rem .5rem; }
}
@media (max-width: 480px) {
	.cpp-demobar-right { gap: .6rem; }
	.cpp-copy-text { font-size: 0; }                       /* hide the "Test card" label, keep the number */
	.cpp-copy-text strong { font-size: .72rem; letter-spacing: 0; }
}

/* ----- DARK FOOTER ----- */
.cpp-footer { background: #030712; color: #9ca3af; padding: 4rem 0 2.5rem; font-family: 'Inter', sans-serif; }
.cpp-footer-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.cpp-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.cpp-footer h4 { color: #fff; font-size: .95rem; font-weight: 600; margin: 0 0 1rem; }
.cpp-footer ul { list-style: none; margin: 0; padding: 0; }
.cpp-footer li { margin-bottom: .75rem; }
.cpp-footer a { color: #9ca3af; font-size: .875rem; text-decoration: none; transition: color .15s; }
.cpp-footer a:hover { color: #8C99FE; }
.cpp-footer-brand { display: inline-flex; }
.cpp-footer-logo { height: 24px; width: auto; display: block; }
.cpp-footer-bottom { border-top: 1px solid #1f2937; margin-top: 3rem; padding-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: #9ca3af; }
.cpp-footer-bottom a { color: #d1d5db; }

@media (max-width: 880px) {
	.cpp-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.cpp-footer-cols { grid-template-columns: 1fr; }
}