/* mod_my_navbottom - แถบเมนูล่างแบบแอปมือถือ */

/*
 * --nb-c1 and --nb-c2 are deliberately not given a value here. Left undefined,
 * every var() that reads them falls through to the template's own --my-primary
 * and --my-light, so the bar wears the site's tone; the module writes them only
 * when someone has picked colours by hand.
 */
.my-nb {
	--nb-count: 4;

	position: fixed; z-index: 1100;
	inset-inline: 0; inset-block-end: 0;
	transition: transform .25s ease;
	/* Clear of the home indicator on iOS. */
	padding-block-end: env(safe-area-inset-bottom, 0);
}

.my-nb.is-hidden { transform: translateY(120%); }

/* Floating: a rounded pill lifted off the bottom edge. */
.my-nb.is-floating {
	inset-inline: 12px; inset-block-end: 12px;
	padding-block-end: 0;
	margin-block-end: env(safe-area-inset-bottom, 0);
}

.my-nb__list {
	list-style: none; margin: 0; padding: 6px;
	display: grid; grid-template-columns: repeat(var(--nb-count), minmax(0, 1fr));
	align-items: stretch;
}

.my-nb.is-floating .my-nb__list { border-radius: 22px; }

/* ---------------------------------------------------------- bar styles -- */
.my-nb.bar-light .my-nb__list { background: #fff; box-shadow: 0 -2px 18px rgba(16, 40, 80, .14); }
.my-nb.bar-light.is-floating .my-nb__list { box-shadow: 0 10px 30px rgba(16, 40, 80, .22); }

.my-nb.bar-dark .my-nb__list { background: #16243c; box-shadow: 0 -2px 18px rgba(0, 0, 0, .3); }
.my-nb.bar-dark .my-nb__link { color: rgba(255, 255, 255, .72); }

.my-nb.bar-brand .my-nb__list { background: linear-gradient(135deg, var(--nb-c1, var(--my-primary, #1b5fa8)), var(--nb-c2, var(--my-light, #2e80d6))); box-shadow: 0 -2px 18px rgba(16, 40, 80, .28); }
.my-nb.bar-brand .my-nb__link { color: rgba(255, 255, 255, .82); }

.my-nb.bar-glass .my-nb__list {
	background: rgba(255, 255, 255, .82); backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .6);
	box-shadow: 0 10px 30px rgba(16, 40, 80, .18);
}

/*
 * A pale wash of whatever colour the template is wearing, light enough to keep
 * dark labels readable. It used to be a fixed blue, which left the bar looking
 * borrowed on an orange or green site; mixed from --my-primary it follows the
 * tone on its own, and on a blue site it lands within a shade of where it was.
 */
.my-nb.bar-sky .my-nb__list {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--my-primary, #1b5fa8) 6%, #fff),
		color-mix(in srgb, var(--my-primary, #1b5fa8) 15%, #fff));
	border: 1px solid color-mix(in srgb, var(--my-primary, #1b5fa8) 16%, transparent);
	box-shadow: 0 -2px 18px rgba(16, 40, 80, .12);
}
.my-nb.bar-sky.is-floating .my-nb__list { box-shadow: 0 10px 30px rgba(16, 40, 80, .2); }
.my-nb.bar-sky .my-nb__link { color: color-mix(in srgb, var(--my-dark, #10427a) 72%, #3a4256); }
.my-nb.bar-sky .my-nb__item.is-active .my-nb__link {
	color: var(--my-dark, #10427a);
	background: color-mix(in srgb, var(--my-primary, #1b5fa8) 16%, transparent);
}

/*
 * Colours picked in the module options. One colour = flat, two = gradient.
 * A box left empty is not written at all, and falls back to the same wash of
 * the template's tone that the "follows the theme" bar uses - so filling in
 * only the text colour, say, still leaves the background following the site.
 */
.my-nb.bar-custom .my-nb__list {
	background: linear-gradient(180deg,
		var(--nb-bg1, color-mix(in srgb, var(--my-primary, #1b5fa8) 6%, #fff)),
		var(--nb-bg2, color-mix(in srgb, var(--my-primary, #1b5fa8) 15%, #fff)));
	border: 1px solid rgba(16, 40, 80, .1);
	box-shadow: 0 -2px 18px rgba(16, 40, 80, .14);
}
.my-nb.bar-custom.is-floating .my-nb__list { box-shadow: 0 10px 30px rgba(16, 40, 80, .22); }
.my-nb.bar-custom .my-nb__link {
	color: var(--nb-tx, color-mix(in srgb, var(--my-dark, #10427a) 72%, #3a4256));
}
.my-nb.bar-custom .my-nb__item.is-active .my-nb__link {
	color: var(--nb-tx, var(--my-dark, #10427a));
	background: rgba(127, 127, 127, .16);
	font-weight: 700;
}

/* --------------------------------------------------------------- items -- */
.my-nb__item { min-width: 0; }

.my-nb__link {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	padding: 8px 4px; min-height: 52px; border-radius: 16px;
	text-decoration: none; color: #5a6a80; font-size: .7rem; line-height: 1.25;
	transition: color .18s ease, background .18s ease, transform .18s ease;
}
.my-nb__link:hover, .my-nb__link:focus-visible { text-decoration: none; }

/* An item that opens the help-desk chat is a button, not a link. */
button.my-nb__link { width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; }

.my-nb__icon { font-size: 1.18rem; line-height: 1; transition: transform .18s ease; }
.my-nb__label { text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.my-nb.no-labels .my-nb__label { display: none; }
.my-nb.no-labels .my-nb__link { min-height: 46px; }
.my-nb.no-labels .my-nb__icon { font-size: 1.34rem; }

a.my-nb__link:hover .my-nb__icon,
button.my-nb__link:hover .my-nb__icon { transform: translateY(-2px); }

/* Current page. */
.my-nb__item.is-active .my-nb__link {
	color: var(--nb-c1, var(--my-primary, #1b5fa8));
	background: color-mix(in srgb, var(--nb-c1, var(--my-primary, #1b5fa8)) 12%, transparent);
	font-weight: 600;
}
.my-nb.bar-dark .my-nb__item.is-active .my-nb__link,
.my-nb.bar-brand .my-nb__item.is-active .my-nb__link { color: #fff; background: rgba(255, 255, 255, .18); }

/* One item can be raised as the primary action, like a post button. */
.my-nb__item.is-highlight .my-nb__link {
	background: linear-gradient(135deg, var(--nb-c1, var(--my-primary, #1b5fa8)), var(--nb-c2, var(--my-light, #2e80d6)));
	color: #fff; font-weight: 600;
	box-shadow: 0 6px 16px rgba(16, 40, 80, .3);
	transform: translateY(-10px);
	margin-block-end: -6px;
}
.my-nb__item.is-highlight .my-nb__icon { font-size: 1.3rem; }
.my-nb__item.is-highlight .my-nb__link:hover { transform: translateY(-13px); }

/* ------------------------------------------------------- when it shows -- */
.my-nb.vis-mobile { display: block; }

@media (min-width: 768px) {
	.my-nb.vis-mobile { display: none; }

	/*
	 * On a wide screen a full-width bar looks lost, so the floating variant
	 * becomes a centred pill of its natural width instead of stretching.
	 */
	.my-nb.is-floating {
		inset-inline: auto; left: 50%;
		width: min(600px, calc(100% - 32px));
		transform: translateX(-50%);
	}
	.my-nb.is-floating.is-hidden { transform: translateX(-50%) translateY(140%); }
}

/*
 * The bar sits over the page, so give the footer room to breathe underneath
 * it - otherwise the last line of the site is always covered.
 */
body:has(.my-nb.vis-always) { padding-block-end: 84px; }

@media (max-width: 767px) {
	body:has(.my-nb) { padding-block-end: 84px; }
}

/* Keep the floating help-desk button clear of the bar. */
@media (max-width: 767px) {
	body:has(.my-nb) .my-hdw.corner-br,
	body:has(.my-nb) .my-hdw.corner-bl { inset-block-end: calc(var(--hdw-y) + 76px); }
	body:has(.my-nb) .my-totop { bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
	.my-nb, .my-nb__link, .my-nb__icon { transition: none; }
}