/* Body and interface: DM Sans (variable font, weight and optical size axes) */
@font-face {
	font-family: 'DM Sans';
	src:         url('/fonts/DMSans.ttf') format('truetype');
	font-weight: 100 1000;
	font-style:  normal;
}

/* Headings: Fraunces */
@font-face {
	font-family: 'Fraunces';
	src:         url('/fonts/Fraunces_72pt-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style:  normal;
}

@font-face {
	font-family: 'Fraunces';
	src:         url('/fonts/Fraunces_72pt-Bold.ttf') format('truetype');
	font-weight: 700 900;
	font-style:  normal;
}

body {
	background-image: unset!important;
	background-color: var(--body-background)!important;
	color: var(--text-by-default);
}

body,
body input,
body select,
body textarea,
body button,
body .btn,
body .tooltip,
body .popover,
body .jsgrid,
body .select2-container {
	font-family: var(--font-family);
}

/* Typography from the AfriVision style guide: Fraunces for headings, DM Sans for the rest */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
	font-family: var(--font-family-heading);
}

h1, .h1 {
	font-weight: 400;
}

h2, .h2,
h3, .h3,
h4, .h4 {
	font-weight: 700;
}

/* Buttons: border-radius 10px, bold 16px text, Ivory label on Terracotta */
.btn,
.button,
.login-button,
.register-button,
#all-esim-section .show-all-button,
body .sidebar-nav ul li.activate-sim-hotspot a,
body .sidebar-nav ul li.buy-bundles a {
	border-radius: 10px !important;
}

/* Button text - Bold 16 */
.btn-primary:not(.btn-sm),
#sign-in .login-button,
#sign-up .register-button,
#recovery-password-wrapper .reset-password,
#recovery-password-wrapper .recovery-password-button {
	font-size:   16px;
	font-weight: 700 !important;
}

.btn-primary,
.btn-primary:hover {
	color: var(--ivory);
}

.login-button, .register-button  {
	background-color: var(--primary)!important;
	color: var(--ivory)!important;
	cursor: pointer;
}

#recovery-password-wrapper .reset-password:hover,
#recovery-password-wrapper .recovery-password-button:hover,
#sign-up .register-button:hover,
#sign-in .login-button:hover {
	background-color: var(--primary-hover)!important;
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
}

.btn-outline-primary:hover {
	color: var(--ivory);
}

.btn-outline-primary.disabled:hover {
	color: var(--gray-300);
}

.btn:focus, .btn.focus,
.btn-outline-primary:focus, .btn-outline-primary.focus {
	box-shadow: none;
}

/* Inputs: Sand border, Umber placeholder */
.form-control {
	border-color: var(--sand);
}

.form-control::placeholder,
input::placeholder {
	color: var(--umber) !important;
}

/* Auth pages: Ivory page background */
body.default-bg,
body.custom-bg {
	background-color: var(--ivory)!important;
}

/* Center the auth block vertically; on short screens it grows and scrolls as usual */
body.custom-bg {
	display:        flex;
	flex-direction: column;
	min-height:     100vh;
	min-height:     100dvh;
}

body.custom-bg > .container {
	top:     0;
	margin:  auto;
	padding: 40px 0;
}

#auth-tabs .nav-link,
.auth-title-txt,
.auth-label,
#sign-in .forgot-password-url,
.social-network-icons-button-wrapper h3 {
	font-weight: 400;
}

/* The card title and field labels are set in Fraunces in the Figma "Log in" frame (9231:2787) */
.auth-title-txt,
.auth-label {
	font-family: var(--font-family-heading);
}

.auth-title-txt {
	font-size: 18px;
}

#auth-tabs .nav-link {
	color: var(--umber);
}

/* Logo above the auth card: 236x43 as in the Figma "Log in" frame */
body.custom-bg .uri-logo .logo-image {
	width:  236px;
	height: auto;
}

.interrupted-line {
	font-size: 12px;
	color:     var(--umber);
}

.interrupted-line::before,
.interrupted-line::after {
	border-bottom-color: var(--sand);
}

#sign-in .forgot-password-url {
	color: var(--espresso);
}

#sign-in .forgot-password-url:hover {
	color: var(--url-color-hover);
}

/* Header */
#header .logo .logo-img {
	width: 176px;
	margin-left: 30px;
}

/* Sidebar */
body .sidebar-nav ul li.buy-bundles a,
body .sidebar-nav ul li.activate-sim-hotspot a {
	border: 1px solid transparent !important;
}
body .sidebar-nav ul li.active a {
	background-color: var(--leftbar-backgroud-hover) !important;
	border-radius: 10px;
}

body .platform-management,
body .lines-subtitle {
	color: rgba(246, 239, 226, 0.6) !important;
}

/* Loader in brand color instead of the default image */
#loader-background > div {
	display: none;
}

#loader-background .loader-circles {
	display: flex!important;
}

#loader-background > div > img {
	display: none;
}

.return-to-top {
	color: var(--primary);
}

.return-to-top:hover {
	color: var(--primary-hover);
}

input[type=checkbox],
input[type=radio] {
	accent-color: var(--primary);
}

/* Checked checkboxes are Terracotta in the console, as in the Figma lines table (core styles use --url-color) */
input[type=checkbox]:checked:not(:disabled) + label:before {
	background-color: var(--primary) !important;
	border-color:     var(--primary) !important;
}

/* ...and Espresso on the auth pages, as in the Figma "Log in" frame (9231:2787) */
body.custom-bg input[type=checkbox]:checked:not(:disabled) + label:before {
	background-color: var(--espresso) !important;
	border-color:     var(--espresso) !important;
}

/* Buy new bundles: plan names in Fraunces, tab counters on Sand (Figma "Buy new eSIM", 9231:2376) */
#content-wrapper .elp-name {
	font-family: var(--font-family-heading);
}

body #content-wrapper .count-search-unlimited-plans,
body #content-wrapper .count-search-travel-plans,
body #content-wrapper .count-search-lifetime-plans {
	background-color: var(--sand);
}

/* Grid */
.jsgrid-grid-header {
	border-radius: 10px 10px 0 0;
}

.jsgrid-header-row > .jsgrid-header-cell:hover {
	color: var(--ivory)!important;
}

/* The header is dark, so Terracotta icons vanish on it: hover, active sort and the filter badge use Gold,
   which the style guide reserves for icons and highlights */
#content-wrapper .jsgrid-table .jsgrid-header-cell:hover svg path {
	fill: var(--gold);
}

#content-wrapper .jsgrid-table .jsgrid-header-sortable.jsgrid-header-sort-asc .custom-sort-icon svg:first-child,
#content-wrapper .jsgrid-table .jsgrid-header-sortable.jsgrid-header-sort-desc .custom-sort-icon svg:last-child,
#common-popup .jsgrid-table .jsgrid-header-sortable.jsgrid-header-sort-asc .custom-sort-icon svg:first-child,
#common-popup .jsgrid-table .jsgrid-header-sortable.jsgrid-header-sort-desc .custom-sort-icon svg:last-child {
	color: var(--gold);
}

.filter-badge {
	background-color: var(--gold);
}