@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--container-width: 380px;
	--bs-primary: #452118;
	--bs-primary-light: #753B2E;
	--bs-secondary: #DFD4C3;
	--bs-primary-hover: color-mix(in srgb, var(--bs-primary), #000 15%);
	--bs-border-radius: 25px;
	--bs-primary-rgb: 92, 44, 34;
	--bs-primary-hover-rgb: 79, 37, 29;
	--bs-secondary-hover: color-mix(in srgb, var(--bs-secondary), #000 15%);
	--bs-secondary-rgb: 223, 212, 195;
	--bs-secondary-hover-rgb: 190, 179, 162;
}

.btn-close {
	color: var(--bs-primary) !important;
	--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23452118'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	opacity: 1;
	
}

.container {
    max-width: var(--container-width);
}

.card {
	overflow: hidden;
	border: 0;
}

* {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 12px;
	user-select: none;
}

h1, h2 {
	font-size: 20px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 14px;
}

h6 {
	font-size: 12px;
}

.fs-1 {
	font-size: 20px !important;
}

.fs-2 {
	font-size: 18px !important;
}

.fs-3 {
	font-size: 16px !important;
}

.fs-4 {
	font-size: 14px !important;
}

.fs-5 {
	font-size: 12px !important;
}

.fs-6 {
	font-size: 10px !important;
}

main {
	min-height: 100vh;
}

main:has(.bottom-nav) {
	padding-bottom: 100px;
}

.bottom-nav {
	font-size: 10px;
}

dialog::backdrop {
	backdrop-filter: blur(2px);
	background: rgba(0, 0, 0, .3);
}

.input-check {
	accent-color: #fff;
	width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 5px;
    vertical-align: middle;
    border: 1px solid var(--bs-primary);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
	margin-top: -6px;
}

.input-check:checked {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="var(--bs-primary)" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>');
    background-position: center;
    background-size: contain;
}

.pill-badge {
	background-color: #f8f9fa;
	--bs-nav-pills-link-active-bg: #d2b48c;
	border: none;
	border-radius: 20px;
	padding: 5px 15px;
	white-space: nowrap;
	font-weight: 500;
}

.text-justify {
	text-align: justify;
}

.bg-primary {
	color: var(--bs-secondary)
}

.text-primary-light {
	color: var(--bs-primary-light);
}

.bg-primary-light {
	background-color: var(--bs-primary-light);
	color: #fff;
}

dialog .modal-header:has(.modal-title:empty) {
	display: none;
}

.svoast-container {
	white-space: pre-line;
}

.btn:not(.nav-link):hover {
	box-shadow: 0px 0px 0px 1px var(--bs-primary);
}

.btn-primary {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-disabled-bg: var(--bs-primary-hover);
	--bs-btn-disabled-border-color: var(--bs-primary-hover);
	--bs-btn-hover-color: var(--bs-primary-hover);
	--bs-btn-hover-bg: var(--bs-primary-hover);
	--bs-btn-hover-border-color: var(--bs-primary-hover);
	--bs-btn-active-bg: var(--bs-primary-hover);
	--bs-btn-active-border-color: var(--bs-primary-hover);
}

.btn, .form-control, .form-select {
	padding: 12px 20px;
	font-size: 20px;
	border-color: transparent;
}

input {
	font-size: 20px !important;
}

.filter-grayscale {
	filter: grayscale(1);
}

.form-control, .form-select {
	background-color: #f8f9fa;
}

.form-check-input:checked {
	background-color: #fff;
	border-color: var(--bs-primary-light);
	color: var(--bs-primary-light);
}

.form-check-input:checked[type=checkbox] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23452118' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.overflow-container {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
}

.product-scroll {
	padding-left: max(10px, calc((100vw - var(--container-width)) / 2));
    padding-right: max(10px, calc((100vw - var(--container-width)) / 2));
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding-bottom: 30px;
	margin-bottom: -10px;
	gap: 17px;
}

/* Hide scrollbar but keep functionality */

.product-scroll::-webkit-scrollbar {
	height: 6px;
}

.product-scroll::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.product-item {
	flex: 0 0 auto;
	width: 212px;
}

.product-item-portrait {
	width: 97px;
}

.product-img {
	height: 88px;
	width: 100%;
	object-fit: cover;
}

.card-body {
	width: 100%;
}

rating-input label {
	margin: 0 5px !important;
}

/* Loading */

.btn.loading,
.input-group-text.loading {
	pointer-events: none;
	opacity: .5;
}

.btn.loading:before,
.input-group-text.loading:before {
	content: '';
	margin-right: 8px;
	position: relative;
	--bs-spinner-width: 1.5rem;
	--bs-spinner-height: 1.5rem;
	--bs-spinner-vertical-align: -0.125em;
	--bs-spinner-border-width: 0.25em;
	--bs-spinner-animation-speed: 0.75s;
	--bs-spinner-animation-name: spinner-border;
	border: var(--bs-spinner-border-width) solid currentcolor;
	border-right-color: transparent;
	display: inline-block;
	width: var(--bs-spinner-width);
	height: var(--bs-spinner-height);
	vertical-align: var(--bs-spinner-vertical-align);
	border-radius: 50%;
	animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}

.btn-sm.loading:before {
	--bs-spinner-width: 1rem;
	--bs-spinner-height: 1rem;
	--bs-spinner-border-width: 0.2em;
}

.input-group-text.loading:before {
	--bs-spinner-border-width: 0.2em;
}

/* Buttons with only an icon should replace the content completely with the loading */

.btn:not(:empty):has(> i:only-child).loading i, .btn:not(:empty):has(> svg:only-child).loading svg, .btn:not(:empty):has(> img:only-child).loading img,
.input-group-text:not(:empty):has(> i:only-child).loading i, .input-group-text:not(:empty):has(> svg:only-child).loading svg, .input-group-text:not(:empty):has(> img:only-child).loading img {
    display: none;
}

.btn:not(:empty):has(> i:only-child).loading:before, .btn:not(:empty):has(> svg:only-child).loading:before,
.input-group-text:not(:empty):has(> i:only-child).loading:before, .input-group-text:not(:empty):has(> svg:only-child).loading:before {
	margin-right: 0;
}

/* Notification count */

.count-badge[data-count]:not([data-count="0"]):before {
	content: attr(data-count);
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background: var(--bs-secondary);
    font-size: 10px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
}

.truncate-1 {
	--truncate-lines: 1;
}

.truncate-2 {
	--truncate-lines: 2;
}

.truncate-3 {
	--truncate-lines: 3;
}

.truncate-1, .truncate-2, .truncate-3 {
	display: -webkit-box;
    -webkit-line-clamp: var(--truncate-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

input[type="date"]::before {
	color: #575a5e;
	content: attr(placeholder);
	position: absolute;
	background: #f8f9fa;
}

input[type="date"] {
	color: #ffffff;
}

input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

/* Toast */

.svoast * {
    font-size: 16px !important;
	text-align: center;
}

.svoast {
    background: #fff !important;
    color: var(--bs-primary) !important;
    display: flex;
    border-radius: 50px !important;
	align-items: center;
}

.svoast-bar {
    display: none;
}

.svoast-icon {
    line-height: 0px;
}
	.bottom-nav.svelte-h2wuh4 {
		position: fixed;
		bottom: 0;
		width: 100%;
		max-width: 480px;
		background-color: white;
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		border-top: 1px solid #f1f1f1;
		z-index: 1000;
		box-shadow: 0px -12px 20px 0px #ccc;
	}
	.nav-item.svelte-h2wuh4 {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #000;
	}
	.qr-code.svelte-h2wuh4 {
		width: 64px;
		height: 64px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: -32px;
	}

	.svoast.svelte-wbah57 {
		background: var(--svoast-bg, #333);
		color: var(--svoast-text, #fff);
		padding: var(--svoast-padding, 12px 15px 12px 18px);
		border-radius: var(--svoast-radius, 4px);
		box-shadow: var(--svoast-shadow, 0 2px 7px hsl(0 0% 0% / 0.25));
		font-size: var(--svoast-font-size, 14px);
		position: relative;
		overflow: hidden;
		pointer-events: all;
		display: flex;
		gap: var(--svoast-dismiss-gap, 8px);
		max-width: var(--svoast-max-width, unset);

		&.info {
			--svoast-colour: var(--svoast-info-colour, #888);
		}
		&.attention {
			--svoast-colour: var(--svoast-attention-colour, #38bdf8);
		}
		&.success {
			--svoast-colour: var(--svoast-success-colour, #4ade80);
		}
		&.warning {
			--svoast-colour: var(--svoast-warning-colour, #fb923c);
		}
		&.error {
			--svoast-colour: var(--svoast-error-colour, #ef4444);
		}
	}
	.svoast-bar.svelte-wbah57 {
		position: absolute;
		top: 0;
		left: 0;
		width: var(--svoast-bar-width, 3px);
		height: 100%;
		background: var(--svoast-colour);
	}

	.svoast-icon.svelte-wbah57 {
		min-width: var(--svoast-icon-size, 21px);
		min-height: var(--svoast-icon-size, 21px);
		max-width: var(--svoast-icon-size, 21px);
		max-height: var(--svoast-icon-size, 21px);
		color: var(--svoast-colour);
		&.promise {
			animation: svelte-wbah57-promiseSpin 1s linear infinite;
		}
	}
	.svoast-dismiss.svelte-wbah57 {
		min-width: var(--svoast-icon-size, 21px);
		min-height: var(--svoast-icon-size, 21px);
		max-width: var(--svoast-icon-size, 21px);
		max-height: var(--svoast-icon-size, 21px);
		padding: var(--svoast-icon-padding, 2px);
	}

	@keyframes svelte-wbah57-promiseSpin {
		from {
			rotate: 0deg;
		}
		to {
			rotate: 360deg;
		}
	}

	.svoast-container.svelte-rj1rfm {
		position: fixed;
		padding: var(--svoast-offset, 16px);
		top: 0;
		height: 100%;
		width: 100%;
		pointer-events: none;
		z-index: 999;
		display: flex;
		flex-direction: column;
		gap: var(--svoast-gap, 16px);
		overflow: hidden;

		&[data-position*='center'] {
			align-items: center;
		}
		&[data-position*='bottom'] {
			justify-content: flex-end;
		}
		&[data-position*='center'] {
			left: 50%;
			transform: translateX(-50%);
		}
		&[data-position*='-left'] {
			left: 0;
			align-items: flex-start;
		}
		&[data-position*='-right'] {
			right: 0;
			align-items: flex-end;
		}
	}
	.svoast-wrapper.svelte-rj1rfm {
		&[data-position='bottom-center'] {
			transform-origin: bottom center;
		}
		&[data-position='bottom-left'] {
			transform-origin: bottom left;
		}
		&[data-position='bottom-right'] {
			transform-origin: bottom right;
		}
		&[data-position='top-center'] {
			transform-origin: top center;
		}
		&[data-position='top-left'] {
			transform-origin: top left;
		}
		&[data-position='top-right'] {
			transform-origin: top right;
		}
	}

	img.svelte-2lmgh3 {
		position: absolute;
		top: -36px;
		left: 22px;
	}

	img.svelte-1p4ghtc {
		width: 100%;
		height: 100px;
		object-fit: cover;
	}
	.discount-badge.svelte-1p4ghtc {
		position: absolute;
		top: 20px;
		right: 0;
	}

	img.svelte-g6xwnd {
		width: 100%;
		height: 100px;
		object-fit: cover;
	}

	.loyalty-circle.svelte-xnuvjm {
		width: 220px;
		height: 220px;
		background: linear-gradient(to bottom, #6c3325 0%, #976f60 37%, #dfd4c3 100%);
		border-radius: 50%;
		margin: 20px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.inner-circle.svelte-xnuvjm {
		width: 180px;
		height: 180px;
		background: #6c3325;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.coffee-cup.svelte-xnuvjm {
		border-radius: 10px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.visit-marker.svelte-xnuvjm {
		position: absolute;
		display: flex;
		flex-direction: column;
	}
	.visit-marker.svelte-xnuvjm .line:where(.svelte-xnuvjm) {
		width: 100px;
		height: 2px;
		background-color: #85A9CD;
	}
	.visit-marker.visit-1.svelte-xnuvjm {
		top: calc(50% - 12px);
		left: -50px;
	}
	.visit-marker.visit-10.svelte-xnuvjm {
		top: 34px;
		right: -50px;
	}
	.progress-bars-left.svelte-xnuvjm,
	.progress-bars-right.svelte-xnuvjm {
		position: absolute;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.progress-bars-left.svelte-xnuvjm {
		left: -50px;
    	top: 60%;
	}
	.progress-bars-right.svelte-xnuvjm {
		right: -50px;
		top: 30%;
	}
	.progress-bar-small.svelte-xnuvjm {
		width: 30px;
		height: 2px;
		margin: 2px 0;
	}
	.event-info.svelte-xnuvjm {
		display: flex;
		align-items: center;
		font-size: 0.8rem;
		color: #6c757d;
		margin-bottom: 3px;
	}
	.discount-badge.svelte-xnuvjm {
		border-radius: 0 0 0 50px;
	}

	button.btn.svelte-7jnyzv:hover {
		box-shadow: none !important;
	}

	.text-info.svelte-9ri6bv {
		color: #85a9cd !important;
	}
	.form-control.svelte-9ri6bv {
		background-color: #f8f9fa !important;
	}
	.btn-check.svelte-9ri6bv:checked + label:where(.svelte-9ri6bv) {
		box-shadow: 0px 0px 0px 2px var(--bs-primary) !important;
	}

	.form-check.svelte-1akpz0g {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.form-check.svelte-1akpz0g input:where(.svelte-1akpz0g) {
		margin: 0;
	}

	#loading.svelte-1o3rxon {
		background: #fff;
		z-index: 999;
	}