/*!
 * 7777KH Wallet & Paywall — footer blocks
 * v0.4.1
 *
 * Scope: DooPlay's <footer class="main"> ONLY. Nothing here leaks to the header,
 * the player, the paywall modal or the profile page.
 *
 * Blocks:
 *   .sevenk-fprimary  — "ទំនាក់ទំនង" contact column (right aligned, like khdiamond)
 *   .sevenk-fpay      — "ជម្រើសទូទាត់ប្រាក់៖" ABA / KHQR logo row (copyright row, right)
 *
 * ⚠️ WHY EVERY SELECTOR STARTS WITH `body`
 * DooPlay's active colour scheme (colors.default.min.css) is a LIGHT scheme and ships
 * the identical selector `footer.main .fcmpbox { background:#fff }`. Identical selector
 * = identical specificity, so whichever file prints last wins — and in v0.4.0 that was
 * the theme, which is why the footer stayed white on the live site.
 * class-7777-footer.php now declares the theme handles as dependencies so this file
 * prints last, AND the `body` prefix raises specificity to (0,2,2)+ so these rules win
 * on their own merit even if that dependency ever drops out. Belt and braces: do not
 * remove the `body` prefix.
 */

/* --------------------------------------------------------------------------
   1. Force the footer dark  (overrides DooPlay's light colour scheme)
   -------------------------------------------------------------------------- */
body footer.main {
	background: #0a0a0e;
	color: #cfcfd8;
}

/* The white bar. Also kills the light-scheme drop shadow that came with it. */
body footer.main .fcmpbox {
	background: transparent;
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

body footer.main .fbox {
	background: transparent;
}

/* Row order is driven by `order:`, not DOM position:
     row 1 -> contact column (full width)
     row 2 -> copyright (left) · payment logos (right) · back-to-top (far right) */
body footer.main .fcmpbox > .sevenk-fprimary {
	order: 1;
	flex: 0 0 100%;
	width: 100%;
}

body footer.main .fcmpbox > .copy {
	order: 2;
	margin-right: auto;
}

body footer.main .fcmpbox > .sevenk-fpay {
	order: 3;
}

body footer.main .fcmpbox > .top-page {
	order: 4;
	margin-left: 16px;
}

/* Copyright line — light on dark, readable. */
body footer.main .fcmpbox > .copy {
	color: #cfcfd8;
	font-size: 14px;
	line-height: 1.6;
}

body footer.main .fcmpbox > .copy strong {
	color: #ffffff;
	font-weight: 600;
}

body footer.main .fcmpbox > .copy a {
	color: #d4a017;
	text-decoration: none;
}

/* Back-to-top chip: the light scheme gives it a near-white plate. Darken it.
   `color` needs !important — see the note above rule 2.1 below. */
body footer.main .top-page a,
body footer.main span.top-page a {
	background: #17171d;
	color: #cfcfd8 !important;
	border: 1px solid #2a2a31;
}

body footer.main .top-page a:hover,
body footer.main span.top-page a:hover {
	background: #1f1f27;
	color: #d4a017 !important;
}

/* --------------------------------------------------------------------------
   2. Block 1 — "ទំនាក់ទំនង"
   -------------------------------------------------------------------------- */
body footer.main .sevenk-fprimary {
	display: flex;
	justify-content: flex-end;
	padding: 34px 0 30px;
	border-bottom: 1px solid #2a2a31;
}

body footer.main .sevenk-fcol {
	min-width: 240px;
}

body footer.main .sevenk-fcol h3 {
	margin: 0 0 6px;
	padding: 0 0 10px;
	border-bottom: 1px solid #d4a017;
	color: #d4a017;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0;
}

body footer.main .sevenk-frow {
	margin-top: 12px;
	color: #e8e8ee;
	font-size: 14px;
	line-height: 1.6;
	display: flex;
	align-items: center;
}

body footer.main .sevenk-frow i {
	width: 18px;
	margin-right: 9px;
	color: #e8e8ee;
	font-size: 14px;
	text-align: center;
	flex: 0 0 18px;
	transition: color .18s ease;
}

/* 2.1 — ⚠️ REQUIRED !important. This site's Customizer → Additional CSS contains:

       #footer a, footer a { color:#cfcfcf !important; }

   An author-level !important cannot be beaten by specificity, only by another
   !important. Without it, footer links render #cfcfcf and the gold hover silently
   does nothing.

   `!important` appears in exactly two places in this file — here, and on the
   back-to-top chip in section 1 — and ONLY on `color`, ONLY for anchors that the
   Customizer rule above already hijacks. Nothing else needs it; do not spread it.

   (That same Customizer block is also what already forces `footer` dark. It simply
   never covered the inner .fcmpbox, which is why only that one bar stayed white.) */
body footer.main .sevenk-frow a {
	color: #e8e8ee !important;
	text-decoration: none;
	transition: color .18s ease;
}

body footer.main .sevenk-frow a:hover,
body footer.main .sevenk-frow a:focus {
	color: #d4a017 !important;
	text-decoration: none;
}

/* Hovering the row lights the icon too, so icon + label read as one target. */
body footer.main .sevenk-frow:hover i {
	color: #d4a017;
}

/* --------------------------------------------------------------------------
   3. Block 2 — accepted payment  (ABA Merchant Guideline v2.11)
   --------------------------------------------------------------------------
   MANDATORY, do not "tidy" these values:
     · minimum logo height ........ 20px
     · clear space around group ... 10px
     · spacing between logos ....... 4px
     · ABA and KHQR identical size
     · no shadow / rotation / stretch / border-radius / filter / recolour
     · logos are already transparent — never put them on a white plate
   -------------------------------------------------------------------------- */
body footer.main .sevenk-fpay {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1;
	color: #e8e8ee;
	background: none;
}

body footer.main .sevenk-fpay-label {
	margin-right: 10px;
	color: #e8e8ee;
	white-space: nowrap;
}

/* 10px clear space on every side of the logo group. */
body footer.main .sevenk-fpay-logos {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	background: none;
}

body footer.main .sevenk-fpay-logos img {
	/* 100x60 source at 20px tall -> 33.33px wide. Both marks share the ratio,
	   so ABA and KHQR come out exactly the same size. */
	height: 20px;
	width: auto;
	display: block;
	max-width: none;
	/* Guideline resets — these override any inherited theme img styling. */
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: none;
	transform: none;
	opacity: 1;
	background: none;
	padding: 0;
	margin: 0;
	object-fit: contain;
	image-rendering: auto;
}

/* 4px between the two marks — never a margin on the first one. */
body footer.main .sevenk-fpay-logos img + img {
	margin-left: 4px;
}

/* Kill DooPlay/theme hover effects on footer images. */
body footer.main .sevenk-fpay-logos img:hover {
	opacity: 1;
	filter: none;
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. Responsive — stack vertically, never break the row
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	body footer.main .sevenk-fprimary {
		justify-content: flex-start;
		padding: 26px 0 22px;
	}
}

@media (max-width: 768px) {
	body footer.main .fcmpbox {
		flex-direction: column;
		align-items: flex-start;
	}

	body footer.main .fcmpbox > .copy {
		margin-right: 0;
		padding: 22px 0 0;
	}

	body footer.main .fcmpbox > .sevenk-fpay {
		padding: 14px 0 0;
	}

	body footer.main .fcmpbox > .top-page {
		margin-left: 0;
		padding: 10px 0 22px;
	}

	body footer.main .sevenk-fcol {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 420px) {
	body footer.main .sevenk-fpay {
		flex-wrap: wrap;
	}

	body footer.main .sevenk-fpay-label {
		margin-right: 0;
		flex: 0 0 100%;
		margin-bottom: 4px;
	}

	/* Clear space stays 10px, but don't indent the group past the copyright. */
	body footer.main .sevenk-fpay-logos {
		padding-left: 0;
	}
}