/* =========================================================
 * CLIBASE POS MODERN LOGIN
 * Desktop-first responsive layout
 * Bootstrap 4 compatible
 * ========================================================= */

html,
body {
	min-height: 100%;
}

body.pos-login-page {
	margin: 0;
	background:
		radial-gradient(circle at top left, rgba(225, 237, 252, .85) 0, rgba(247, 250, 254, .92) 34%, #f4f8fd 100%);
	color: #0d2342;
	font-family: "Inter", "Segoe UI", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.pos-login-page * {
	box-sizing: border-box;
}

.pos-login-shell {
	display: grid;
	grid-template-columns: 490px minmax(0, 1fr);
	gap: 30px;
	width: 100%;
	min-height: 100vh;
	padding: 46px 38px;
}

.pos-login-card,
.pos-hero-card,
.pos-status-card {
	border: 1px solid rgba(19, 58, 102, .08);
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 10px 35px rgba(42, 74, 112, .11);
}

.pos-login-card {
	min-height: calc(100vh - 92px);
	border-radius: 6px;
	overflow: hidden;
}

.pos-login-card-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 62px 42px 26px;
}

.pos-login-brand {
	margin: 0 0 34px;
	text-align: center;
}

.pos-login-brand img {
	width: 255px;
	max-width: 76%;
	height: auto;
}

.pos-login-heading {
	margin-bottom: 36px;
	text-align: center;
}

.pos-login-heading h1 {
	margin: 0 0 8px;
	color: #102947;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.2;
}

.pos-login-heading p {
	margin: 0 auto;
	max-width: 320px;
	color: #71809a;
	font-size: 15px;
	line-height: 1.55;
}

.pos-login-card .alert {
	border-radius: 10px;
	font-size: 13px;
}

.pos-field {
	margin-bottom: 20px;
}

.pos-field label {
	display: block;
	margin: 0 0 8px;
	color: #53637a;
	font-size: 13px;
	font-weight: 500;
}

.pos-input-wrap {
	position: relative;
}

.pos-input-icon {
	position: absolute;
	top: 50%;
	left: 18px;
	z-index: 2;
	color: #8997ab;
	font-size: 20px;
	transform: translateY(-50%);
	pointer-events: none;
}

.pos-input-wrap .form-control {
	height: 56px;
	padding: 10px 48px;
	border: 1px solid #d5deea;
	border-radius: 9px;
	background: #fff;
	color: #172c49;
	font-size: 14px;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.pos-input-wrap .form-control::placeholder {
	color: #8f9aac;
}

.pos-input-wrap .form-control:focus {
	border-color: #1676ff;
	box-shadow: 0 0 0 3px rgba(22, 118, 255, .10);
}

.pos-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	height: 56px;
	margin-top: 22px;
	border: 0 !important;
	border-radius: 8px;
	background: linear-gradient(135deg, #0f69e6 0%, #087bf9 100%) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 10px 24px rgba(18, 111, 239, .20);
	transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.pos-login-btn:not(:disabled):hover {
	transform: translateY(-1px);
	box-shadow: 0 13px 28px rgba(18, 111, 239, .27);
}

.pos-login-btn:disabled {
	cursor: not-allowed;
	opacity: .72;
}

.pos-login-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 22px 0;
	color: #7b8798;
	font-size: 13px;
}

.pos-login-divider::before,
.pos-login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #dfe6ef;
}

.pos-login-divider span {
	flex: 0 0 auto;
}

.social-login {
	display: grid;
	gap: 11px;
}

.pos-time-btn {
	gap: 10px;
	height: 56px;
	border: 1.5px solid #0f78ff !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #0f6fe8 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .1px;
	box-shadow: none !important;
}

.pos-time-btn:hover,
.pos-time-btn:focus {
	background: #f4f9ff !important;
	color: #0b63d0 !important;
}

.pos-time-btn-secondary {
	border-color: #d6deea !important;
	color: #52647a !important;
}

.pos-login-help {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 30px;
	color: #748198;
	font-size: 12px;
}

.pos-login-version {
	margin-top: 18px;
	color: #79869a;
	text-align: center;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: .15px;
}

.pos-login-main {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 30px;
	min-width: 0;
}

.pos-hero-card {
	position: relative;
	display: grid;
	grid-template-columns: 49% 51%;
	min-height: 578px;
	border-radius: 6px;
	overflow: hidden;
}

.pos-hero-copy {
	position: relative;
	z-index: 3;
	padding: 84px 0 48px 48px;
}

.pos-eyebrow {
	margin-bottom: 26px;
	color: #096ef0;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .18px;
}

.pos-hero-copy h2 {
	margin: 0;
	color: #0d2442;
	font-size: clamp(38px, 3vw, 53px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -1.4px;
}

.pos-hero-copy h2 span {
	color: #1478ff;
}

.pos-hero-description {
	margin: 28px 0 0;
	color: #65758d;
	font-size: 15px;
	line-height: 1.65;
}

.pos-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 450px;
	margin-top: 58px;
}

.pos-feature-item {
	min-width: 0;
}

.pos-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border: 1px solid #cfe1fb;
	border-radius: 10px;
	background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
	color: #1077fa;
	font-size: 24px;
	box-shadow: 0 4px 10px rgba(23, 106, 223, .05);
}

.pos-feature-item h3 {
	margin: 0;
	color: #172b47;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

.pos-feature-item p {
	margin: 0;
	color: #738199;
	font-size: 12px;
	line-height: 1.5;
}

.pos-hero-media {
	position: relative;
	z-index: 1;
	min-width: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.pos-hero-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.42) 14%, rgba(255,255,255,0) 35%);
	pointer-events: none;
}

.pos-hero-blue-shape {
	position: absolute;
	z-index: 0;
	width: 180px;
	height: 760px;
	background: linear-gradient(180deg, rgba(11, 103, 228, .96), rgba(15, 125, 255, .84));
	transform: rotate(22deg);
	pointer-events: none;
}

.pos-hero-blue-shape-one {
	top: -224px;
	right: 70px;
}

.pos-hero-blue-shape-two {
	right: 330px;
	bottom: -500px;
	opacity: .9;
}

.pos-merchant-card {
	position: absolute;
	right: 38px;
	bottom: 25px;
	z-index: 5;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 15px;
	width: min(335px, calc(100% - 60px));
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(3, 100, 229, .96), rgba(31, 132, 255, .92));
	color: #fff;
	box-shadow: 0 12px 28px rgba(8, 89, 194, .26);
	backdrop-filter: blur(8px);
}

.pos-merchant-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 8px;
	font-size: 20px;
}

.pos-merchant-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.pos-merchant-copy small {
	margin-bottom: 3px;
	color: rgba(255,255,255,.88);
	font-size: 11px;
}

.pos-merchant-copy strong {
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pos-merchant-copy span {
	color: rgba(255,255,255,.8);
	font-size: 12px;
}

.pos-merchant-arrow {
	font-size: 25px;
	font-weight: 300;
}

.pos-status-card {
	display: grid;
	grid-template-columns: 1.15fr 1.15fr 1fr 1fr;
	min-height: 142px;
	border-radius: 6px;
	overflow: hidden;
	padding: 29px 22px;
}

.pos-status-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	padding: 0 22px;
}

.pos-status-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	width: 1px;
	height: calc(100% - 16px);
	background: #e0e7f0;
}

.pos-status-icon,
.pos-status-indicator {
	display: flex;
	flex: 0 0 54px;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid #d7e7fb;
	border-radius: 50%;
	background: #eef6ff;
	color: #0b74f5;
	font-size: 23px;
}

.pos-status-indicator {
	border-color: #d2ead8;
	background: #effaf2;
}

.pos-status-indicator span {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #16b75a;
	box-shadow: 0 0 0 8px rgba(22, 183, 90, .08);
}

.pos-status-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.pos-status-copy > span {
	margin-bottom: 4px;
	color: #708099;
	font-size: 12px;
}

.pos-status-copy strong {
	overflow: hidden;
	color: #192e4b;
	font-size: 15px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pos-status-copy small {
	margin-top: 6px;
	color: #74849c;
	font-size: 11px;
}

.pos-status-copy .pos-status-action {
	color: #0876fa;
	font-weight: 600;
}

.pos-status-item-online .pos-status-copy strong {
	color: #13a74f;
}

/* Custom slim scroll */
.scrollbar {
	width: 100%;
	height: 500px;
	margin-left: 0;
	overflow-y: auto;
}

.force-overflow {
	min-height: 450px;
}

.slim-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #f5f5f5;
}

.slim-scroll::-webkit-scrollbar-thumb {
	background-color: #4e5e6a38;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}

/* =========================================================
 * RESPONSIVE
 * ========================================================= */

@media (max-width: 1450px) {
	.pos-login-shell {
		grid-template-columns: 430px minmax(0, 1fr);
		gap: 24px;
		padding: 30px;
	}

	.pos-login-card {
		min-height: calc(100vh - 60px);
	}

	.pos-login-card-inner {
		padding: 45px 34px 24px;
	}

	.pos-login-brand {
		margin-bottom: 25px;
	}

	.pos-login-heading {
		margin-bottom: 26px;
	}

	.pos-hero-card {
		min-height: 530px;
	}

	.pos-hero-copy {
		padding: 68px 0 42px 40px;
	}

	.pos-feature-grid {
		gap: 18px;
		margin-top: 46px;
	}

	.pos-status-card {
		padding: 24px 14px;
	}

	.pos-status-item {
		gap: 12px;
		padding: 0 14px;
	}
}

@media (max-width: 1199.98px) {
	.pos-login-shell {
		grid-template-columns: 390px minmax(0, 1fr);
	}

	.pos-hero-card {
		grid-template-columns: 56% 44%;
	}

	.pos-hero-copy h2 {
		font-size: 38px;
	}

	.pos-feature-grid {
		max-width: 400px;
	}

	.pos-status-card {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 0;
	}

	.pos-status-item:nth-child(2)::after,
	.pos-status-item:nth-child(4)::after {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.pos-login-shell {
		display: block;
		padding: 22px;
	}

	.pos-login-card {
		min-height: auto;
	}

	.pos-login-card-inner {
		padding: 42px 34px 24px;
	}

	.pos-login-main {
		margin-top: 22px;
	}

	.pos-hero-card {
		grid-template-columns: 1fr;
	}

	.pos-hero-copy {
		padding: 44px 36px;
	}

	.pos-hero-media {
		min-height: 380px;
	}

	.pos-feature-grid {
		max-width: 520px;
	}

	.pos-login-help {
		margin-top: 30px;
	}
}

@media (max-width: 767.98px) {
	body.pos-login-page {
		background: #f4f8fd;
	}

	.pos-login-shell {
		padding: 12px;
	}

	.pos-login-card,
	.pos-hero-card,
	.pos-status-card {
		border-radius: 14px;
	}

	.pos-login-card-inner {
		padding: 34px 22px 22px;
	}

	.pos-login-brand img {
		width: 220px;
	}

	.pos-login-heading h1 {
		font-size: 24px;
	}

	.pos-input-wrap .form-control,
	.pos-login-btn,
	.pos-time-btn {
		height: 54px;
	}

	.pos-login-main {
		gap: 14px;
		margin-top: 14px;
	}

	.pos-hero-copy {
		padding: 34px 24px;
	}

	.pos-eyebrow {
		margin-bottom: 18px;
		font-size: 12px;
	}

	.pos-hero-copy h2 {
		font-size: 34px;
	}

	.pos-hero-description {
		margin-top: 20px;
	}

	.pos-feature-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 32px;
	}

	.pos-feature-item {
		display: grid;
		grid-template-columns: 48px 1fr;
		grid-template-rows: auto auto;
		column-gap: 12px;
	}

	.pos-feature-icon {
		grid-row: 1 / 3;
		width: 48px;
		height: 48px;
		margin: 0;
	}

	.pos-feature-item h3 {
		margin: 2px 0 2px;
	}

	.pos-feature-item h3 br,
	.pos-feature-item p br {
		display: none;
	}

	.pos-hero-media {
		min-height: 320px;
	}

	.pos-merchant-card {
		right: 16px;
		bottom: 16px;
		width: calc(100% - 32px);
	}

	.pos-status-card {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 12px 22px;
	}

	.pos-status-item {
		padding: 18px 0;
	}

	.pos-status-item:not(:last-child)::after {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
	}

	.pos-status-item:nth-child(2)::after {
		display: block;
	}
}

@media (max-width: 420px) {
	.pos-login-card-inner {
		padding-right: 18px;
		padding-left: 18px;
	}

	.pos-hero-copy h2 {
		font-size: 30px;
	}

	.pos-login-version {
		font-size: 10px;
	}
}

/* =========================================================
 * V002 - DESKTOP SINGLE-VIEWPORT FIT
 * Keeps the complete login + hero + status area inside one
 * browser viewport on desktop/laptop screens.
 * Mobile/tablet can continue to scroll naturally.
 * ========================================================= */

@media (min-width: 992px) {
	html,
	body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body.pos-login-page {
		height: 100vh;
		min-height: 100vh;
		overflow: hidden;
	}

	.pos-login-shell {
		height: 100vh;
		min-height: 0;
		padding: clamp(20px, 3.3vh, 30px);
	}

	.pos-login-card {
		height: 100%;
		min-height: 0;
	}

	.pos-login-card-inner {
		height: 100%;
		min-height: 0;
		padding-top: clamp(24px, 4.2vh, 42px);
		padding-bottom: clamp(16px, 2.4vh, 24px);
	}

	.pos-login-brand {
		margin-bottom: clamp(16px, 2.5vh, 24px);
	}

	.pos-login-brand img {
		width: clamp(205px, 15vw, 245px);
		max-height: 82px;
		object-fit: contain;
	}

	.pos-login-heading {
		margin-bottom: clamp(16px, 2.7vh, 26px);
	}

	.pos-login-heading h1 {
		margin-bottom: 5px;
		font-size: clamp(23px, 2.8vh, 27px);
	}

	.pos-login-heading p {
		font-size: clamp(13px, 1.65vh, 15px);
		line-height: 1.45;
	}

	.pos-login-card .alert {
		margin-bottom: clamp(10px, 1.6vh, 16px);
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.pos-field {
		margin-bottom: clamp(11px, 1.8vh, 18px);
	}

	.pos-field label {
		margin-bottom: 6px;
	}

	.pos-input-wrap .form-control {
		height: clamp(48px, 6.1vh, 54px);
	}

	.pos-login-btn {
		height: clamp(48px, 6.1vh, 54px);
		margin-top: clamp(10px, 1.6vh, 16px);
	}

	.pos-login-divider {
		margin: clamp(12px, 1.9vh, 18px) 0;
	}

	.pos-time-btn {
		height: clamp(48px, 6.1vh, 54px);
	}

	.pos-login-help {
		margin-top: auto;
		padding-top: clamp(12px, 1.8vh, 20px);
	}

	.pos-login-version {
		margin-top: clamp(10px, 1.5vh, 16px);
		line-height: 1.55;
	}

	.pos-login-main {
		height: 100%;
		min-height: 0;
		grid-template-rows: minmax(0, 1fr) clamp(118px, 15vh, 140px);
		gap: clamp(16px, 2.6vh, 24px);
	}

	.pos-hero-card {
		height: 100%;
		min-height: 0;
	}

	.pos-hero-copy {
		padding-top: clamp(40px, 7.2vh, 68px);
		padding-bottom: clamp(28px, 4.8vh, 44px);
	}

	.pos-eyebrow {
		margin-bottom: clamp(14px, 2.6vh, 24px);
	}

	.pos-hero-description {
		margin-top: clamp(16px, 3vh, 26px);
	}

	.pos-feature-grid {
		margin-top: clamp(26px, 5.2vh, 48px);
	}

	.pos-feature-icon {
		width: clamp(44px, 5.7vh, 52px);
		height: clamp(44px, 5.7vh, 52px);
		margin-bottom: clamp(8px, 1.5vh, 14px);
	}

	.pos-status-card {
		height: 100%;
		min-height: 0;
		padding-top: clamp(16px, 2.7vh, 24px);
		padding-bottom: clamp(16px, 2.7vh, 24px);
	}

	.pos-status-icon,
	.pos-status-indicator {
		flex-basis: clamp(46px, 6vh, 54px);
		width: clamp(46px, 6vh, 54px);
		height: clamp(46px, 6vh, 54px);
	}
}

/* Extra compression for common 1366x768 / short laptop screens */
@media (min-width: 992px) and (max-height: 820px) {
	.pos-login-shell {
		gap: 20px;
		padding: 18px 22px;
	}

	.pos-login-card-inner {
		padding: 22px 30px 14px;
	}

	.pos-login-brand {
		margin-bottom: 14px;
	}

	.pos-login-brand img {
		width: 205px;
		max-height: 66px;
	}

	.pos-login-heading {
		margin-bottom: 14px;
	}

	.pos-login-heading h1 {
		font-size: 22px;
	}

	.pos-login-heading p {
		max-width: 290px;
		font-size: 12px;
		line-height: 1.35;
	}

	.pos-login-card .alert {
		margin-bottom: 10px;
		padding: 8px 12px;
		font-size: 12px;
	}

	.pos-field {
		margin-bottom: 10px;
	}

	.pos-field label {
		margin-bottom: 4px;
		font-size: 12px;
	}

	.pos-input-wrap .form-control {
		height: 46px;
		font-size: 13px;
	}

	.pos-input-icon {
		font-size: 17px;
	}

	.pos-login-btn,
	.pos-time-btn {
		height: 46px;
		font-size: 13px !important;
	}

	.pos-login-btn {
		margin-top: 8px;
	}

	.pos-login-divider {
		margin: 10px 0;
	}

	.social-login {
		gap: 8px;
	}

	.pos-login-help {
		padding-top: 10px;
		font-size: 12px;
	}

	.pos-login-version {
		margin-top: 8px;
		font-size: 11px;
		line-height: 1.4;
	}

	.pos-login-main {
		grid-template-rows: minmax(0, 1fr) 112px;
		gap: 18px;
	}

	.pos-hero-copy {
		padding: 38px 0 26px 34px;
	}

	.pos-eyebrow {
		margin-bottom: 14px;
		font-size: 12px;
	}

	.pos-hero-copy h2 {
		font-size: clamp(31px, 3vw, 43px);
	}

	.pos-hero-description {
		margin-top: 15px;
		font-size: 13px;
		line-height: 1.5;
	}

	.pos-feature-grid {
		margin-top: 25px;
	}

	.pos-feature-icon {
		width: 42px;
		height: 42px;
		margin-bottom: 7px;
		font-size: 20px;
	}

	.pos-feature-item h3 {
		margin-bottom: 4px;
		font-size: 12px;
	}

	.pos-feature-item p {
		font-size: 10.5px;
	}

	.pos-status-card {
		padding: 14px 10px;
	}

	.pos-status-item {
		gap: 10px;
		padding: 0 12px;
	}

	.pos-status-icon,
	.pos-status-indicator {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
		font-size: 18px;
	}

	.pos-status-copy > span,
	.pos-status-copy small {
		font-size: 10px;
	}

	.pos-status-copy strong {
		font-size: 13px;
	}
}

/* Very short desktop displays: keep the functional login controls visible. */
@media (min-width: 992px) and (max-height: 680px) {
	.pos-login-help {
		display: none;
	}

	.pos-login-version {
		margin-top: auto;
	}

	.pos-login-heading p {
		display: none;
	}

	.pos-login-brand {
		margin-bottom: 10px;
	}

	.pos-login-heading {
		margin-bottom: 10px;
	}

	.pos-login-main {
		grid-template-rows: minmax(0, 1fr) 96px;
		gap: 12px;
	}
}

/* =========================================================
 * V003 - BETTER VERTICAL DISTRIBUTION
 * Removes the large dead space below the login actions and
 * below the feature cards on desktop.
 * ========================================================= */

@media (min-width: 992px) {

	/* Center the complete login content vertically instead of
	   pushing help/version all the way to the bottom. */
	.pos-login-card-inner {
		justify-content: center;
	}

	.pos-login-help {
		margin-top: 26px;
		padding-top: 0;
	}

	.pos-login-version {
		margin-top: 12px;
	}

	/* Center the left-side hero content vertically so the
	   feature cards do not sit only in the upper half. */
	.pos-hero-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 100px;
		padding-bottom: 36px;
	}

	.pos-feature-grid {
		margin-top: clamp(34px, 5vh, 52px);
	}
}

/* Keep the layout compact on common 1366x768 / laptop screens. */
@media (min-width: 992px) and (max-height: 820px) {

	.pos-login-card-inner {
		justify-content: center;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.pos-login-help {
		margin-top: 18px;
		padding-top: 0;
	}

	.pos-login-version {
		margin-top: 8px;
	}

	.pos-hero-copy {
		justify-content: center;
		padding-top: 100px;
		padding-bottom: 24px;
	}

	.pos-feature-grid {
		margin-top: 28px;
	}
}

/* On extremely short desktop screens, prioritize the form
   and essential controls while keeping the layout centered. */
@media (min-width: 992px) and (max-height: 680px) {

	.pos-login-card-inner {
		justify-content: center;
	}

	.pos-login-version {
		margin-top: 8px;
	}

	.pos-hero-copy {
		justify-content: center;
	}
}

/* =========================================================
 * V004 - FEATURE CARDS NEAR BOTTOM OF HERO
 *
 * Keeps the headline/description in the upper portion of the
 * left hero column, while anchoring:
 * - Real-time Insights
 * - Inventory Control
 * - Team Productivity
 *
 * near the bottom of the hero section.
 * ========================================================= */

@media (min-width: 992px) {
	.pos-hero-copy {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		height: 100%;
		min-height: 0;
	}

	.pos-feature-grid {
		margin-top: auto;
		padding-top: 32px;
		padding-bottom: 12px;
	}
}

/* Common laptop / POS resolutions */
@media (min-width: 992px) and (max-height: 820px) {
	.pos-hero-copy {
		justify-content: flex-start;
	}

	.pos-feature-grid {
		margin-top: auto;
		padding-top: 20px;
		padding-bottom: 15px;
	}
}

/* Very short desktop screens */
@media (min-width: 992px) and (max-height: 680px) {
	.pos-feature-grid {
		margin-top: auto;
		padding-top: 12px;
		padding-bottom: 0;
	}
}

/* =========================================================
 * LOGIN PAGE - PRODUCT TOUR TRIGGER
 * ========================================================= */

.pos-login-card-inner {
	position: relative;
}

.pos-login-tour-trigger {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid #d7e5f7;
	border-radius: 18px;
	background: #f7fbff;
	color: #1478f2;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	outline: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pos-login-tour-trigger .icon-compass {
	font-size: 15px;
}

.pos-login-tour-trigger:hover,
.pos-login-tour-trigger:focus {
	border-color: #1478f2;
	background: #ffffff;
	color: #0967d5;
	box-shadow: 0 4px 14px rgba(20, 120, 242, 0.14);
	outline: none;
}

.pos-login-tour-trigger:active {
	transform: translateY(1px);
}

@media (max-width: 575.98px) {
	.pos-login-tour-trigger {
		top: 14px;
		right: 14px;
		width: 36px;
		padding: 0;
	}

	.pos-login-tour-trigger .pos-login-tour-label {
		display: none;
	}
}