/*
	Boostmonitor Mobile Utilities

	Utility Classes and Reusable Components for Mobile WebView

	Version: 1.0.0
	Author: Hector Felan | @boostmonitor
	Author URI: https://boostmonitor.com
	
	Purpose:
	- Utility classes for fonts, colors, spacing, and sizing
	- Reusable button styles and interactive components
	- Common layout helpers (flexbox, positioning, dimensions)
	- Typography and text formatting utilities
	- Background and border utilities
	
	Contents:
	- Font families and text utilities
	- Color classes (background, text, borders)
	- Spacing utilities (padding, margin)
	- Button components and states
	- Flexbox and grid helpers
	- Display and visibility utilities
	
	Usage:
	- Loaded after mobile-style.css in the stylesheet cascade
	- Apply utility classes directly in HTML/PHP templates
	- Keeps main stylesheet clean and focused on structure
	
	License: Proprietary - Licensed under Boostmonitor
 */

/*
==================================
    HIDE BROWSER'S SCROLLBARS
==================================
*/
 * {
 	scrollbar-width: none !important;
 }

 /* Hide scrollbars for all browsers */
 *::-webkit-scrollbar {
 	display: none !important;
 	/* Chrome, Safari, Edge */
 }

 body,
 html {
 	-ms-overflow-style: none;
 	/* IE and Edge */
 	scrollbar-width: none;
 	/* Firefox */
 }

/*
==================================
    RETRIEVE FONTS
==================================
*/
 @font-face {
 	font-family: 'SF-Pro-Light';
 	src: url('../../../fonts/SF-Pro/SF-Pro-Display-Light.otf') format('opentype');
 }

 @font-face {
 	font-family: 'SF-Pro-Regular';
 	src: url('../../../fonts/SF-Pro/SF-Pro-Display-Regular.otf') format('opentype');
 }

 @font-face {
 	font-family: 'SF-Pro-Medium';
 	src: url('../../../fonts/SF-Pro/SF-Pro-Display-Medium.otf') format('opentype');
 }

 @font-face {
 	font-family: 'SF-Pro-Semibold';
 	src: url('../../../fonts/SF-Pro/SF-Pro-Display-Semibold.otf') format('opentype');
 }

 @font-face {
 	font-family: 'SF-Pro-Bold';
 	src: url('../../../fonts/SF-Pro/SF-Pro-Display-Bold.otf') format('opentype');
 }

 @font-face {
 	font-family: 'SF-Pro-Black';
 	src: url('../../../fonts/SF-Pro/SF-Pro-Display-Black.otf') format('opentype');
 }

/*
==================================
    FONT FAMILIES & SIZES
==================================
*/
 .sf-pro-light {
 	font-family: 'SF-Pro-Light', sans-serif;
 }

 .sf-pro-regular {
 	font-family: 'SF-Pro-Regular', sans-serif;
 }

 .sf-pro-medium {
 	font-family: 'SF-Pro-Medium', sans-serif;
 }

 .sf-pro-semibold {
 	font-family: 'SF-Pro-Semibold', sans-serif;
 }

 .sf-pro-bold {
 	font-family: 'SF-Pro-Bold', sans-serif;
 }

 .sf-pro-black {
 	font-family: 'SF-Pro-Black', sans-serif;
 }

 .fs-5 {
 	font-size: calc(5 / var(--default-font-size-value) * 1rem);
 }

 .fs-8 {
 	font-size: calc(8 / var(--default-font-size-value) * 1rem);
 }

 .fs-10 {
 	font-size: calc(10 / var(--default-font-size-value) * 1rem);
 }

 .fs-11 {
 	font-size: calc(11 / var(--default-font-size-value) * 1rem);
 }

 .fs-12 {
 	font-size: calc(12 / var(--default-font-size-value) * 1rem);
 }

 .fs-13 {
 	font-size: calc(13 / var(--default-font-size-value) * 1rem);
 }

 .fs-14 {
 	font-size: calc(14 / var(--default-font-size-value) * 1rem);
 }

 .fs-16 {
 	font-size: calc(16 / var(--default-font-size-value) * 1rem);
 }

 .fs-18 {
 	font-size: calc(18 / var(--default-font-size-value) * 1rem);
 }

 .fs-20 {
 	font-size: calc(20 / var(--default-font-size-value) * 1rem);
 }

 .fs-22 {
 	font-size: calc(22 / var(--default-font-size-value) * 1rem);
 }

 .fs-24 {
 	font-size: calc(24 / var(--default-font-size-value) * 1rem);
 }

 .fs-26 {
 	font-size: calc(26 / var(--default-font-size-value) * 1rem);
 }

 .fs-28 {
 	font-size: calc(28 / var(--default-font-size-value) * 1rem);
 }

 .fs-30 {
 	font-size: calc(30 / var(--default-font-size-value) * 1rem);
 }

/*
==================================
    LINE HEIGHTS
==================================
*/
 .line-height-0 {
 	line-height: 1;
 }

 .line-height-1 {
 	line-height: 1.25;
 }

 .line-height-2 {
 	line-height: 1.5;
 }

 .line-height-3 {
 	line-height: 1.75;
 }

 .line-height-4 {
 	line-height: 2;
 }

 /*
==================================
    COLORS
==================================
*/
 .bg-body {
 	background-color: var(--body-background-color);
 }

 .bg-dark {
 	background-color: var(--dark-color);
 }

 .bg-dark-secondary {
 	background-color: var(--dark-secondary-color);
 }

 .bg-dark-tertiary {
 	background-color: var(--dark-tertiary-color);
 }

 .bg-dark-quaternary {
 	background-color: var(--dark-quaternary-color);
 }

 .bg-clear {
 	background-color: var(--clear-color);
 }

 .bg-clear-secondary {
 	background-color: var(--clear-secondary-color);
 }

 .bg-clear-tertiary {
 	background-color: var(--clear-tertiary-color);
 }

 .bg-clear-quaternary {
 	background-color: var(--clear-quaternary-color);
 }

 .bg-primary {
 	background-color: var(--primary-color);
 }

 .bg-secondary {
 	background-color: var(--secondary-color);
 }

 .bg-tertiary {
 	background-color: var(--tertiary-color);
 }

 .bg-quaternary {
 	background-color: var(--quaternary-color);
 }

 .bg-success {
 	background-color: var(--success-color);
 }

 .bg-error {
 	background-color: var(--error-color);
 }

 .bg-warning {
 	background-color: var(--warning-color);
 }

 .bg-info {
 	background-color: var(--info-color);
 }

 .dark-color {
 	color: var(--dark-color);
 }

 .dark-secondary-color {
 	color: var(--dark-secondary-color);
 }

 .dark-tertiary-color {
 	color: var(--dark-tertiary-color);
 }

 .dark-quaternary-color {
 	color: var(--dark-quaternary-color);
 }

 .clear-color {
 	color: var(--clear-color);
 }

 .clear-secondary-color {
 	color: var(--clear-secondary-color);
 }

 .clear-tertiary-color {
 	color: var(--clear-tertiary-color);
 }

 .clear-quaternary-color {
 	color: var(--clear-quaternary-color);
 }

 .primary-color {
 	color: var(--primary-color);
 }

 .secondary-color {
 	color: var(--secondary-color);
 }

 .tertiary-color {
 	color: var(--tertiary-co lor);
 }

 .quaternary-color {
 	color: var(--quaternary-color);
 }

 .success-color {
 	color: var(--success-color);
 }

 .error-color {
 	color: var(--error-color);
 }

 .warning-color {
 	color: var(--warning-color);
 }

 .info-color {
 	color: var(--info-color);
 }

 /*
==================================
    CURSORS
==================================
*/
 .cursor-pointer {
 	cursor: pointer;
 }
 .cursor-default {
 	cursor: default;
 }
 .cursor-not-allowed {
 	cursor: not-allowed;
 }
/*
==================================
    FIXED LAYOUTS
==================================
*/
.fixed-layout {
	position: fixed;
}

.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

.fixed-layout-content {
	position: fixed;
}

.overflow-y-auto {
	overflow-y: auto;
}

/*
==================================
    FLEX LAYOUTS
==================================
*/
.flex {
	display: flex;
	height: 100%;
}

.vertical-top {
	align-items: flex-start;
}

.vertical-center {
	align-items: center;
}

.vertical-bottom {
	align-items: flex-end;
}

.horizontal-left {
	justify-content: flex-start;
}

.horizontal-center {
	justify-content: center;
}

.horizontal-right {
	justify-content: flex-end;
}

.horizontal-space-between {
	justify-content: space-between;
}

.flex-column {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-no-shrink {
	flex-shrink: 0;
}

.gap-0 {
	gap: 0;
}

.gap-5 {
	gap: 5px;
}

.gap-10 {
	gap: 10px;
}

.gap-15 {
	gap: 15px;
}

.gap-20 {
	gap: 20px;
}

/* 
==================================
	ABSOLUTE LAYOUTS
==================================
 */
.absolute {
	position: absolute;
}

.absolute-top {
	top: 0;
	left: 0;
}

.absolute-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.absolute-top-left {
	top: 0;
	left: 0;
}

.absolute-top-right {
	top: 0;
	right: 0;
}

.absolute-bottom-left {
	bottom: 0;
	left: 0;
}

.absolute-bottom-right {
	bottom: 0;
	right: 0;
}

/*
==================================
    STICKY LAYOUTS
==================================
*/
.sticky-top {
	position: sticky;
	top: 0;
	z-index: 5;
}

/*
==================================
    MARGINS
==================================
*/
.mt-safe-area {
	margin-top: var(--safe-area-top, var(--default-padding));
}

.mt-0 {
	margin-top: 0;
}

.mt-5 {
	margin-top: 0.3125rem;
}

.mt-10 {
	margin-top: 0.625rem;
}

.mt-15 {
	margin-top: 0.9375rem;
}

.mt-20 {
	margin-top: 1.25rem;
}

.mt-25 {
	margin-top: 1.5625rem;
}

.mt-30 {
	margin-top: 1.875rem;
}

.mb-safe-area {
	margin-bottom: var(--safe-area-top, var(--default-padding));
}

.mb-0 {
	margin-bottom: 0;
}

.mb-5 {
	margin-bottom: 0.3125rem;
}

.mb-10 {
	margin-bottom: 0.625rem;
}

.mb-15 {
	margin-bottom: 0.9375rem;
}

.mb-20 {
	margin-bottom: 1.25rem;
}

.mb-25 {
	margin-bottom: 1.5625rem;
}

.mb-30 {
	margin-bottom: 1.875rem;
}

.ml-0 {
	margin-left: 0;
}

.ml-5 {
	margin-left: 0.3125rem;
}

.ml-10 {
	margin-left: 0.625rem;
}

.ml-15 {
	margin-left: 0.9375rem;
}

.ml-20 {
	margin-left: 1.25rem;
}

.mr-0 {
	margin-right: 0;
}

.mr-5 {
	margin-right: 0.3125rem;
}

.mr-10 {
	margin-right: 0.625rem;
}

.mr-15 {
	margin-right: 0.9375rem;
}

.mr-20 {
	margin-right: 1.25rem;
}

/*
==================================
    PADDINGS
==================================
*/
.pt-safe-area {
	padding-top: var(--safe-area-top, var(--default-padding));
}

.pt-0 {
	padding-top: 0;
}

.pt-5 {
	padding-top: 0.3125rem;
}

.pt-10 {
	padding-top: 0.625rem;
}

.pt-15 {
	padding-top: 0.9375rem;
}

.pt-20 {
	padding-top: 1.25rem;
}

.pb-safe-area {
	padding-bottom: var(--safe-area-top, var(--default-padding));
}

.pb-0 {
	padding-bottom: 0;
}

.pb-5 {
	padding-bottom: 0.3125rem;
}

.pb-10 {
	padding-bottom: 0.625rem;
}

.pb-15 {
	padding-bottom: 0.9375rem;
}

.pb-20 {
	padding-bottom: 1.25rem;
}

.pl-0 {
	padding-left: 0;
}

.pl-5 {
	padding-left: 0.3125rem;
}

.pl-10 {
	padding-left: 0.625rem;
}

.pl-15 {
	padding-left: 0.9375rem;
}

.pl-20 {
	padding-left: 1.25rem;
}

.pl-30 {
	padding-left: 2.75rem;
}

.pl-40 {
	padding-left: 3.75rem;
}

.pl-50 {
	padding-left: 4.75rem;
}

.pr-0 {
	padding-right: 0;
}

.pr-5 {
	padding-right: 0.3125rem;
}

.pr-10 {
	padding-right: 0.625rem;
}

.pr-15 {
	padding-right: 0.9375rem;
}

.pr-20 {
	padding-right: 1.25rem;
}

.pr-30 {
	padding-right: 1.875rem;
}

.pr-40 {
	padding-right: 2.5rem;
}

.pr-50 {
	padding-right: 3.25rem;
}

/*
==================================
    ELEMENTS
==================================
*/
.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.fixed-top {
	top: 0;
	left: 0;
	width: 100%;
}

/* 
==================================
	T,B,L,R POSITIONS
==================================
 */
.top-0 {
	top: 0;
}
.top-1 {
	top: calc(1 / var(--default-font-size-value) * 1rem);
}
.top-2 {
	top: calc(2 / var(--default-font-size-value) * 1rem);
}
.top-3 {
	top: calc(3 / var(--default-font-size-value) * 1rem);
}
.top-4 {
	top: calc(4 / var(--default-font-size-value) * 1rem);
}
.top-5 {
	top: calc(5 / var(--default-font-size-value) * 1rem);
}
.top-6 {
	top: calc(6 / var(--default-font-size-value) * 1rem);
}
.top-7 {
	top: calc(7 / var(--default-font-size-value) * 1rem);
}
.top-8 {
	top: calc(8 / var(--default-font-size-value) * 1rem);
}
.top-9 {
	top: calc(9 / var(--default-font-size-value) * 1rem);
}
.top-10 {
	top: calc(10 / var(--default-font-size-value) * 1rem);
}
.top-50p {
	top: 50%;
}
.left-0 {
	left: 0;
}
.left-1 {
	left: calc(1 / var(--default-font-size-value) * 1rem);
}
.left-2 {
	left: calc(2 / var(--default-font-size-value) * 1rem);
}
.left-3 {
	left: calc(3 / var(--default-font-size-value) * 1rem);
}
.left-4 {
	left: calc(4 / var(--default-font-size-value) * 1rem);
}
.left-5 {
	left: calc(5 / var(--default-font-size-value) * 1rem);
}
.left-6 {
	left: calc(6 / var(--default-font-size-value) * 1rem);
}
.left-7 {
	left: calc(7 / var(--default-font-size-value) * 1rem);
}
.left-8 {
	left: calc(8 / var(--default-font-size-value) * 1rem);
}
.left-9 {
	left: calc(9 / var(--default-font-size-value) * 1rem);
}
.left-10 {
	left: calc(10 / var(--default-font-size-value) * 1rem);
}
.left-15 {
	left: calc(15 / var(--default-font-size-value) * 1rem);
}
.left-50p {
	left: 50%;
}

/* 
==================================
	HEIGHTS
==================================
 */
.h-10 {
	height: calc(10 / var(--default-font-size-value) * 1rem);
}
.h-15 {
	height: calc(15 / var(--default-font-size-value) * 1rem);
}
.h-20 {
	height: calc(20 / var(--default-font-size-value) * 1rem);
}
.h-25 {
	height: calc(25 / var(--default-font-size-value) * 1rem);
}
.h-30 {
	height: calc(30 / var(--default-font-size-value) * 1rem);
}
.h-35 {
	height: calc(35 / var(--default-font-size-value) * 1rem);
}
.h-40 {
	height: calc(40 / var(--default-font-size-value) * 1rem);
}
.h-45 {
	height: calc(45 / var(--default-font-size-value) * 1rem);
}
.h-50 {
	height: calc(50 / var(--default-font-size-value) * 1rem);
}

/* 
==================================
	TRANSFORMATIONS
==================================
 */
.transform-center-y {
	top: 50%;
	transform: translateY(-50%);
}

/* 
==================================
	BORDER RADIUS
==================================
 */
.border-radius-default {
	border-radius: var(--default-border-radius);
}

/* 
==================================
	BOX SIZING
==================================
 */
.border-box {
	box-sizing: border-box;
}

/* 
==================================
	BORDERS
==================================
 */
.border-none {
	border: none;
}

/* 
==================================
	INPUTS
==================================
 */
.focus-none:focus {
	outline: none;
	box-shadow: none;
}
.active-none:active {
	outline: none;
	box-shadow: none;
}
.visited-none:visited {
	outline: none;
	box-shadow: none;
}