/* background colors  */

html, 
body, 
.background-primary-1,
.modal-container,
.tabs .chip.selected,
.tabs li a.selected,
.primary, .row .tap-icon:not(.icon-right)
{
  background-color: var(--css-background-primary-1);
}

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

.secondary, .background-secondary-1, .content-secondary-1, .chip:not(.transparent), .tabs ul:not(.transparent), .rows .list:not(.transparent), .thumb-icons .tap-icon
{
  background-color: var(--css-background-secondary-1); 
}

.background-secondary-2, .content-secondary-2, .chip:not([href]):not(.transparent):not(.selected):hover, a.tap-icon:hover, button.chip:hover, .tabs li a:not(.selected):hover
{
  background-color: var(--css-background-secondary-2); 
}

.background-accent-1, .content-accent:not(.transparent), .chip.primary:hover
{
  background-color: var(--css-background-accent-2); 
}

.background-accent-2, .chip.primary, .tap-icon.primary
{
  background-color: var(--css-background-accent-1); 
}

/* font colors  */
.font-primary-1, .content-primary-1, html, body, .submenu > li a, .submenu > li button, .tabs li a:hover, input::placeholder, textarea::placeholder {color: var(--css-font-primary-1); opacity: 1;}
.font-primary-2, .content-primary-2 {color: var(--css-font-primary-2); }
.font-secondary-1, .content-secondary-1, a:not(.primary):not(.selected):not(.card):hover {color: var(--css-font-secondary-1); }
.font-secondary-2, .content-secondary-2, .claim-or, .hint {color: var(--css-font-secondary-2); }
.accent-font-1, .content-accent, .chip.primary {color: var(--css-font-accent-1); }

.hint {font-size: 14px;}
.inline-block {display: inline-block;}

.border {border: 1px solid var(--css-background-secondary-1);}
.border-dotted {border-style: dotted;}
.delimiter::after {content:''; width: var(--css-gap-64); display: block;border-top: 1px solid var(--css-background-secondary-1); margin: 0 auto;}

/* fonts  */
body, html {font-family: 'Nunito', Arial, Helvetica, sans-serif; font-size: var(--css-fs-base); line-height: var(--css-lh-base); font-weight: 300; }
body {font-size: var(--css-fs-m); line-height: var(--css-lh-m);}
.bolder, .icon-letter, .page-header > h1 + h2 {font-weight: 300;}
.bold, h1, h2, h3 {font-weight: 600;}

/* headers  */
h1, .fs-xxl {font-size:  var(--css-fs-xxl);line-height: var(--css-lh-xxl); }
h2, .fs-xl {font-size: var(--css-fs-xl);line-height: var(--css-lh-xl); }
h3, .fs-l {font-size: var(--css-fs-l);line-height: var(--css-lh-l); }
h4, .fs-m {font-size: var(--css-fs-m);line-height: var(--css-lh-m); }
h5, h6, .fs-s {font-size: var(--css-fs-s);line-height: var(--css-lh-s); }

a.xs, span.xs, p.xs {font-size: 10px; line-height: 16px;}
a.s, span.s, p.s {font-size: 12px; line-height: 16px;}

sup {top: -4px;font-size: 10px;}

/* transitons  */
button, button:hover, a, a:hover, li, li:hover, div.row {transition: background-color 0.3s}

/* html body */
html {width: 100%;height: 100%;}
body {display: flex;flex-direction: column;min-height: 100vh;overflow: hidden;}
body > * {width: 100%;}

/* auto layout  */
.auto-layout, 
.auto-layout-strech, 
.field,
.buttons,
.buttons ul:not([class*="auto-layout"]),
.page-header, 
.chip,
.form,
.form > fieldset, 
.field,
body > footer > div, 
body > footer > div:last-child ul,
.chips > ul
{ 
  display: flex; 
  flex-direction: column;
  gap: 0; 
}

.auto-layout-row{display: flex; flex-direction: row; gap: 0;}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.auto-layout.reverse {flex-direction: row-reverse;}

.auto-layout-row, .chips > ul, .chip, body > footer > div:last-child ul { flex-direction: row; }
.auto-layout-strech { align-items: stretch;}

.top, .left, .auto-layout.left {align-items: flex-start;}
.middle, .center, .auto-layout.center {align-items: center;}
.bottom, .right, .auto-layout.right {align-items: flex-end;}

.auto-layout.justify-left, .justify-left {justify-content: left;}
.auto-layout.justify-center, .justify-center {justify-content: center;}
.auto-layout.justify-right, .justify-right {justify-content: right;}
.auto-layout.space-between, .space-between {justify-content: space-between;}
.auto-layout.space-evenly, .space-evenly {justify-content: space-evenly;}

.align-center, .chip, body > header > nav { align-items: center; justify-content: center; }

.center {margin-left: auto; margin-right: auto;}

.gap-4 { gap:4px; }
.gap-8, .thumb-icons:not([class*="gap-"]), .form:not([class*="gap-"]), .buttons ul:not([class*="gap-"]), .field:not([class*="gap-"]) { gap: var(--css-gap-8); }
.gap-16, .form > fieldset, .card:not([class*="gap-"]), body > div.content > main:not([class*="gap-"]) {gap: var(--css-gap-16);}
.gap-24 { gap: var(--css-gap-24); }
.gap-32 { gap: var(--css-gap-32); }
.gap-64 { gap: var(--css-gap-64); }
.gap-128 { gap: var(--css-gap-128); }

.m-4 { margin: 4px; }
.m-8 { margin: 8px; }
.m-16 { margin: 16px; }
.m-24 { margin: var(--css-gap-24); }
.m-32 { margin: var(--css-gap-32); }
.m-64 { margin: var(--css-gap-64); }
.m-128 { margin: var(--css-gap-128); }

.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: var(--css-gap-24); }
.mt-32 { margin-top: var(--css-gap-32); }
.mt-64 { margin-top: var(--css-gap-64); }
.mt-128 { margin-top: var(--css-gap-128); }

.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: var(--css-gap-24); }
.mb-32 { margin-bottom: var(--css-gap-32); }
.mb-64 { margin-bottom: var(--css-gap-64); }
.mb-128 { margin-bottom: var(--css-gap-128); }

.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: var(--css-gap-24); }
.ml-32 { margin-left: var(--css-gap-32); }
.ml-64 { margin-left: var(--css-gap-64); }
.ml-128 { margin-left: var(--css-gap-128); }

.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.mr-24 { margin-right: var(--css-gap-24); }
.mr-32 { margin-right: var(--css-gap-32); }
.mr-64 { margin-right: var(--css-gap-64); }
.mr-128 { margin-right: var(--css-gap-128); }

.p-4 { padding: 4px; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: var(--css-gap-24); }
.p-32 { padding: var(--css-gap-32); }
.p-64 { padding: var(--css-gap-64); }
.p-128 { padding: var(--css-gap-128); }

.pt-4 { padding-top: 4px; }
.pt-8 { padding-top: 8px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: var(--css-gap-24); }
.pt-32 { padding-top: var(--css-gap-32); }
.pt-64 { padding-top: var(--css-gap-64); }
.pt-128 { padding-top: var(--css-gap-128); }

.pb-4 { padding-bottom: 4px; }
.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: var(--css-gap-24); }
.pb-32 { padding-bottom: var(--css-gap-32); }
.pb-64 { padding-bottom: var(--css-gap-64); }
.pb-128 { padding-bottom: var(--css-gap-128); }

.pl-4 { padding-left: 4px; }
.pl-8 { padding-left: 8px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: var(--css-gap-24); }
.pl-32 { padding-left: var(--css-gap-32); }
.pl-64 { padding-left: var(--css-gap-64); }
.pl-128 { padding-left: var(--css-gap-128); }

.pr-4 { padding-right: 4px; }
.pr-8 { padding-right: 8px; }
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: var(--css-gap-24); }
.pr-32 { padding-right: var(--css-gap-32); }
.pr-64 { padding-right: var(--css-gap-64); }
.pr-128 { padding-right: var(--css-gap-128); }

.w-256 { width: 256px; }
.w-320 { width: 320px; }

/* content-section  */
.content-section, .qrcode {border-radius: var(--css-dimensions-border-radius);}
.content-section {
	width: 100%;	
	flex-direction: column;
	align-items: center;
	align-self: stretch;
}

.container-vertical { min-height: 100%; }

/* page header  */
.page-header { align-items: center; text-align: center; gap: var(--css-gap-8);}
.page-header.left { align-items: flex-start; text-align: left; gap: var(--css-gap-8);}

.page-header.xs > h1 {font-size: 14px; line-height: 16px;}
.page-header.s > h1 {font-size:  var(--css-fs-l);line-height: var(--css-lh-l);}
.page-header > h1 {font-size:  var(--css-fs-l);line-height: var(--css-lh-l);}
.page-header.l > h1 {font-size:  var(--css-fs-xl);line-height: var(--css-lh-xl);}
.page-header.xl > h1 {font-size:  var(--css-fs-xl);line-height: var(--css-lh-xl);}
.page-header.xxl > h1 {font-size:  var(--css-fs-xxl);line-height: var(--css-lh-xxl);}

.page-header.xs > h3 {font-size: 14px; line-height: 16px;}
.page-header.s > h3 {font-size:  var(--css-fs-s);line-height: var(--css-lh-xs);}
.page-header > h3 {font-size:  var(--css-fs-s);line-height: var(--css-lh-s);}
.page-header.l > h3 {font-size:  var(--css-fs-m);line-height: var(--css-lh-m);}
.page-header.xl > h3 {font-size:  var(--css-fs-l);line-height: var(--css-lh-l);}

.page-header.xs > span, .page-header.xs > h1 + h2 {font-size:  var(--css-fs-s);line-height: var(--css-lh-s); }
.page-header.s > span, .page-header.s > h1 + h2 {font-size:  var(--css-fs-s);line-height: var(--css-lh-s);}
.page-header > span, .page-header > h1 + h2 {font-size:  var(--css-fs-m);line-height: var(--css-lh-m);}
.page-header.l > span, .page-header.l > h1 + h2 {font-size:  var(--css-fs-m);line-height: var(--css-lh-m);}
.page-header.xl > span, .page-header.xl > h1 + h2 {font-size:  var(--css-fs-m);line-height: var(--css-lh-m);}
.page-header.xxl > span, .page-header.xxl > h1 + h2 {font-size:  var(--css-fs-l);line-height: var(--css-lh-l);}

.page-header > .tap-icon[class*="logo-"] {background-color: transparent;}
.page-header.xs > .tap-icon {width: 32px; height: 32px; background-size: 32px; }
.page-header.s > .tap-icon {width: 40px; height: 40px; background-size: 40px; }
.page-header > .tap-icon {width: 48px; height: 48px; background-size: 48px; }
.page-header.l > .tap-icon {width: 64px; height: 64px; background-size: 64px; }
.page-header.xl > .tap-icon {width: 96px; height: 96px; background-size: 96px; }
.page-header.xxl > .tap-icon {width: 128px; height: 128px; background-size: 128px; }

.thumb-icons {display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; }
.thumb-icons a {width: 48px; display: flex; flex-direction: column; gap: var(--css-gap-8); align-items: center; margin: 0 auto;}
.thumb-icons a::after {display: block; content: attr(data-label); font-size:  var(--css-fs-s);line-height: 16px; text-align: center;}

.tap-icon.square.l {padding: 27px;} 
.w-100p {width: 100%;}

/* .buttons */
.buttons button:not([class*="w-"]) {width: 100%;}

.stretch {width: 100%;height: 100%;}

.dropdown, .buttons.w-256 {margin-left:0; margin-right:0;}

/* autocomplete */
.autocomplete li a { color: var(--css-font-secondary-1); }
.autocomplete li a strong { color: var(--css-font-primary-1); }
.autocomplete mark {font-style: normal; color: var(--css-font-primary-1); text-decoration-color: var(--css-font-secondary-2);font-weight: 300; background-color: transparent; }
.field.autocomplete {position: relative;}
.field.autocomplete .submenu {top: 58px;left: 0;max-height: 384px; overflow-x: scroll; min-width: 320px;}

/* chips */

/* chip */
.chip {padding: 0 16px;font-size: 16px;line-height: 32px; min-height: 32px;}
.chips ul {gap: 8px;}
.chips.l .chip, .chip.l {padding: 3px 18px;gap: 4px;}
.chips.l > ul {gap: 16px;}
.chips > ul {align-items: center;}
.chips {display: flex; flex-direction: row; gap: 40px;}

.chip:not(.avatar) .tap-icon {margin: -8px -2px -8px -10px; padding: 0 14px; }
.chip, .avatar {border-radius: var(--css-dimensions-border-radius-circle);}

.chip.flex > span + span { flex:1 0 0; }
.chip.flex:hover { background-color: var(--css-background-secondary-1) }

/* chevron  */
.chevron {display: flex; align-items: center;}
.chevron::after {
    border-bottom: 1px solid var(--css-font-primary-1);
    border-right: 1px solid var(--css-font-primary-1);
    content: "";
    display: block;
    height: 5px;
    margin-left: 16px;
    transform: rotate(45deg);
    transform-origin: 3px 3px;
    transition: transform .25s ease-in-out;
    width: 5px;
    margin-left: 8px;
}
.chip.chevron {padding-right: 12px;}
.chip.chevron.avatar {padding-left: 6px;padding-right: 10px;}

/* search  */
body > header > nav {position: relative;display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;min-height: 48px;}
body > header > nav > ul:last-child li:last-child .submenu {right: 0; top: 44px;}
body > header > nav > ul { display: flex; flex-direction: row; align-items:center; }


#search-bar, #center-logo {display: flex;flex-direction: row; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; justify-content: center;pointer-events: none;}
#search-bar > *, #center-logo > * {pointer-events: all;}
#search-bar .ake-button {display: none;}
#search-bar input {
  background-position: 8px;
  background-size: 24px;
  background-repeat: no-repeat;
  border-radius: var(--css-dimensions-border-radius-circle);
  padding-left: 38px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* body header nav */
.menu {position: relative; cursor: pointer;}
.open + .submenu {
  visibility: visible;
  opacity: 1;
}

.visibility-hidden {visibility: hidden;}

.submenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: var(--css-background-secondary-1);
  border-radius: var(--css-dimensions-border-radius);
  min-width: 222px;
  z-index: 999;
  transition: visibility 0s, opacity 0.2s linear;
}

.submenu > li:not(:first-child) {
  border-top: 1px solid var(--css-background-primary-1);
}

.submenu > li.separator {
  border-width: 2px;
}

.submenu > li a, .submenu > li button {
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  width: 100%;
  text-align: left;
  min-width: var(--css-dimensions-button-widest);
}


.submenu > li:first-child {
  border-top-left-radius: var(--css-dimensions-border-radius);
  border-top-right-radius: var(--css-dimensions-border-radius);
}


.submenu > li:last-child {
  border-bottom-left-radius: var(--css-dimensions-border-radius);
  border-bottom-right-radius: var(--css-dimensions-border-radius);
}

.submenu > li:hover {
  background-color: var(--css-background-secondary-2);
}


/* begin figma css */
	.clip-content {overflow: hidden; }
	.fill-container {flex-grow: 1;}
/* end figma css */

/* claim or */
	.claim-or {display: flex;flex-direction: row; text-align: center;}
	.claim-or span {flex: 0.2 0 auto; text-align: center;}
	.claim-or:after, .claim-or:before {
    content: "";
    border-bottom: 1px dotted var(--css-background-secondary-2);
    flex: 1 0 auto;
    height: 11px;
    margin: 0;
}

.claim.s h2 {font-size: 16px; line-height: 24px; font-weight: 600;}

/* begin forms  */
.hidden, .field-no-label label {display: none;}

.field {width: 100%; display: flex; align-items: flex-start;}

.field-icon input:not([type=checkbox]):not([type=radio]) { padding-left: 48px }

.field input:not([type=checkbox]):not([type=radio]), .field textarea, .field select { font-size: 16px; line-height: 32px; color: var(--css-font-primary-1); width: 100%;}
.field input, .field textarea, .field select { padding: 16px; line-height: 24px }

.field.s input:not([type=checkbox]):not([type=radio]), .field.s textarea { padding: 8px 16px; line-height: 24px; }
.field.l input:not([type=checkbox]):not([type=radio]), .field.l textarea { padding: 12px 16px; line-height: 24px; }

.field-icon-button {position: relative;}
.field-icon-button .tap-icon {position: absolute; right: 8px; top: 12px; cursor: pointer;}
.field-icon-button input {padding-right: 64px;}


.fieldset.combined .fields, .field-input > input, .field-textarea > textarea, .field-select select {
	border: 1px solid var(--css-background-secondary-2);
  border-radius: var(--css-dimensions-border-radius);
	background-color: var(--css-background-secondary-1);  
}

.fieldset.combined .fields .field:not(:first-child) {border-top: 1px solid var(--css-background-secondary-2);}
.fieldset.item-name-desc textarea::placeholder {color: var(--css-font-secondary-1);}

.field-input > input.icon {padding-left: 44px; background-repeat: no-repeat; background-position: 8px 12px; background-size: 32px 32px;}
.field-input > input.icon.icon-logo-p {background-position: 10px 16px; background-size: 28px;}

.form textarea { height: 112px;}

.field-input > input:focus, .field-input > input:focus-visible, .field-textarea > textarea:focus, .field-select select:focus { border-color: var(--css-font-secondary-1); outline: 0; transition : border 300ms ease-out;}
label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; }



.field-checkbox, .field-checkbox label, .field-checkbox input {cursor: pointer;}
.field-checkbox {display: flex; flex-direction: row;}

.field-file {flex-direction: column; gap: 8px;}
.field-file input[type=file] {max-width: 100%;}
.recommendation-media-list {display: grid; gap: 12px; width: 100%;}
.recommendation-media-list legend {font-weight: 600;}
.recommendation-media-card {display: grid; grid-template-columns: 96px 1fr; gap: 8px 16px; align-items: center;}
.recommendation-media-card img {width: 96px; height: 96px; object-fit: cover; border-radius: var(--css-dimensions-border-radius); grid-row: span 2;}
.recommendation-media-card label {display: flex; gap: 8px; align-items: center; cursor: pointer;}

.hint a {text-decoration: underline;}

/*div[data-tabs-content] > div[data-tab]:not(:first-child) {display: none;}*/

.tabs, .tabs ul {display: flex; justify-content: center; align-items: center;}
.tabs ul {
  flex-direction: row;
  border-radius: var(--css-dimensions-border-radius-circle);
  padding: 2px;
  gap: 8px;
}
.tabs li a, .tabs li a:hover {
  display: flex; 
  border-radius: var(--css-dimensions-border-radius-circle);
  min-width: 108px;
  justify-content: center;
}
.tabs li a.selected {cursor: default;}

.tabs.xs li a {font-size: var(--css-fs-xs); list-style: var(--css-lh-xs);padding: 0 10px;}
.tabs.s li a {font-size: var(--css-fs-s); list-style: var(--css-lh-s);padding: 2px 12px;}
.tabs li a {font-size: var(--css-fs-m); list-style: var(--css-lh-m);padding: 4px 16px;}
.tabs.l li a {font-size: var(--css-fs-l); list-style: var(--css-lh-l);padding: 6px 18px;}
.tabs.xl li a {font-size: var(--css-fs-xl); list-style: var(--css-lh-xl);padding: 8px 20px;}
.tabs.xxl li a {font-size: var(--css-fs-xxl); list-style: var(--css-lh-xxl);padding: 8px 24px;}

/* rows list  */
.rows > ul {margin: 0 auto;}
.rows .list, .rows > .row {border-radius: var(--css-dimensions-border-radius);}
.rows > ul > li:first-child .row, .rows .img {border-top-left-radius: var(--css-dimensions-border-radius);border-top-right-radius: var(--css-dimensions-border-radius);}
.rows > ul > li:last-child .row {border-bottom-left-radius: var(--css-dimensions-border-radius);border-bottom-right-radius: var(--css-dimensions-border-radius);}

/* rows row */
.rows .row {background-color: var(--css-background-secondary-1); cursor: pointer; display: flex; flex-direction: row; flex-grow: 1; min-width: 260px; max-width: 360px;}
.rows .row:hover {background-color: var(--css-background-secondary-2);}
.rows .avatar {background-color: var(--css-background-primary-1);}
.rows .row .img {aspect-ratio: 4 / 3; height: auto; min-height: 80px; max-height: none; object-fit: contain; }
.rows .row .tap-icon {margin: 16px;}
.rows > ul > li:not(:last-child) {border-bottom: 1px solid var(--css-background-primary-1);}
.rows .content, .rows .content > div > ul {display: flex; flex-direction: row; width: 100%;}
.rows .content > div {padding: 8px 0;flex: 1;display: flex;align-items: flex-start;flex-direction: column;justify-content: center;}
.rows .content h3 {font-size:  var(--css-fs-m);line-height: var(--css-lh-m);}
.rows > ul > li, .rows > div {display: flex; flex-direction: row; font-size: 12px; line-height: 16px}
.rows .content ul li:not(:first-child)::before {content: "\2022";margin: 0 5px;}

/* Category examples stay on one line and are clipped when the row is too narrow. */
.categories .content > div > ul {flex-wrap: nowrap; min-width: 0; overflow: hidden;}
.categories .content > div > ul > li {flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.categories .content > .tap-icon {flex: 0 0 auto; aspect-ratio: 1;}

.content-thumbs {display: flex; gap: 24px; flex-wrap: wrap;}
.content-thumbs > div {width: 320px; border-radius: var(--css-dimensions-border-radius);}

.featured-recommendations {display: flex; flex-direction: column; gap: var(--css-gap-16); width: 100%;}
.featured-recommendations__list {overflow-x: auto; padding: 0 var(--css-gap-16) var(--css-gap-8); scroll-snap-type: x mandatory;}
.featured-recommendations__track {display: flex; gap: var(--css-gap-16); justify-content: center; min-width: 100%; width: max-content;}
.featured-recommendations__card {background-color: var(--css-background-secondary-1); border-radius: var(--css-dimensions-border-radius); color: var(--css-font-primary-1); display: flex; flex: 0 0 160px; flex-direction: column; gap: 2px; overflow: hidden; padding: var(--css-gap-8); scroll-snap-align: start; text-align: left;}
.featured-recommendations__card:hover {background-color: var(--css-background-secondary-2); color: var(--css-font-primary-1);}
.featured-recommendations__image {aspect-ratio: 4 / 5; border-radius: calc(var(--css-dimensions-border-radius) / 2); object-fit: cover; width: 100%;}
.featured-recommendations__fallback {align-items: center; background-color: var(--css-background-primary-2); display: flex; font-size: var(--css-fs-xl); font-weight: 600; justify-content: center;}
.featured-recommendations__title {font-size: var(--css-fs-m); font-weight: 600; line-height: var(--css-lh-m); margin-top: var(--css-gap-8);}
.featured-recommendations__claim {color: var(--css-font-secondary-2); font-size: var(--css-fs-s); line-height: var(--css-lh-s);}

.columns {display: flex;justify-content: space-evenly; flex-wrap: wrap;align-items: stretch;}
.columns.c-3 {gap: var(--css-gap-32);}
.columns.c-2 {gap: var(--css-gap-64);}

.border-radius, .card.border {border-radius: var(--css-dimensions-border-radius);}
.shadow, .card.border, .shadow:hover, .card.border:hover {box-shadow: var(--css-box-shadow); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }
.shadow:hover, .card.border:hover {box-shadow: var(--css-box-shadow-hover); }

.card {max-width: 400px; display: flex; flex-direction: column; align-items: center;padding: var(--css-gap-16) var(--css-gap-24); text-align: center;}

/*.rows > header {padding-bottom: 16px;}
.rows .content {border-radius: var(--css-dimensions-border-radius);}
.rows > .content > ul > li:first-child {border-top-left-radius: var(--css-dimensions-border-radius);border-top-right-radius: var(--css-dimensions-border-radius);}
.rows > .content > ul > li:last-child {border-bottom-left-radius: var(--css-dimensions-border-radius);border-bottom-right-radius: var(--css-dimensions-border-radius);}
.rows > .content > ul > li:hover {background-color: var(--css-background-secondary-2); cursor: pointer;}
.rows > .content > ul > li > div:first-child {margin-left: 16px;}
.rows > .content > ul > li > div:last-child {margin-right: 16px;}
.rows > .content > ul > li > .tap-icon {margin: 16px;}
.rows > .content > ul > li:not(:last-child) {border-bottom: 1px solid var(--css-background-primary-1);}
.rows > .content > ul > li, .rows > .content > ul > li > div > ul {display: flex; flex-direction: row; }
.rows > .content > ul > li > div {padding: 8px 0;flex: 1;display: flex;align-items: flex-start;flex-direction: column;justify-content: center;}
.rows > .content > ul > li > div > h3 {font-size:  var(--css-fs-s);line-height: var(--css-lh-xs); font-weight: 600;}
.rows > .content > ul > li > div > ul li {display: flex; flex-direction: row; font-size: 12px; line-height: 16px}
.rows > .content > ul > li > div > ul li:not(:first-child)::before {content: "\2022";margin: 0 5px;}
.rows > .content .tap-icon {background-color: transparent;}
.rows > .content .tap-icon.icon-letter {background-color: var(--css-background-primary-1); }*/

/* animations */
  .rotate-element, .logo .tap-icon {transition: transform 0.5s ease-in-out; }
  .rotate-element:hover, .logo:hover .tap-icon {transform: rotate(360deg);}
  .tap-icon.rotate-element:hover {background-color: transparent;}


/* dark mode  */
/* Apply the filter directly on the body tag */
/*body.dark img {filter: brightness(.8) contrast(1.2); }*/

.text p + p {margin-top: 8px}
.text ul > li + li {margin-top: 4px;}

/* main */
body > div.content {flex: 1; margin-top: var(--css-gap-16); margin-bottom: var(--css-gap-16); display: flex; flex-wrap: wrap; max-width: 100%; }
body > div.content:not(.justify-middle) > main {flex: 1; }
body > div.content > main > article, body > div.content > aside {width: 100%; display: flex; flex-direction: column; gap: var(--css-gap-32); }

.field-validation {color: var(--css-font-);}

/* body footer */
body > footer {font-size: 12px; line-height: 16px; border-top: 1px solid var(--css-background-secondary-1); margin-top: 64px;}
body > footer > div:first-child {border-bottom: 1px solid var(--css-background-secondary-1);  }
body > footer > div > div { display: flex; flex-direction: row; }
body > footer > div:first-child > div {justify-content: space-around;width:100%;}
body > footer > div:last-child > div {gap: 32px;}
body > footer > div a { color: var(--css-font-primary-1); }
body > footer > div a:hover { color: var(--css-font-secondary-2); }

body > footer > div:first-child section li {line-height: 16px;margin-top: 4px}

body > footer > div:first-child section li::before {
  content: "•";
  display: inline-block;
  margin-right: 4px;
}

body > footer > div:last-child ul li:not(:first-child) {
  margin-left: 4px;
}

body > footer > div:last-child ul li:not(:first-child)::before {
  content: "•";
  display: inline-block;
  margin-right: 4px;
}

body > footer > div {padding: 16px;}

@media (width > 480px) {
  body > footer > section {
    padding-right: 10%;
  }
}

@media screen and (max-width: 359px) {
  .w-320 {width: 100%;}
  .button.icon {background-image: none;}
  .rows > .content > ul > li > a.tap-icon {display: none;}
}

@media screen and (max-width: 399px) {
  .w-360 { width: 100%; }
}
@media screen and (min-width: 400px) {
  .w-360 { width: 360px; }
}

@media screen and (max-width: 639px) {

  body > header > nav .chip.logo.chevron {padding-left: 12px;}
  body > header > nav .chip.logo.chevron::after {margin-left: 4px;}
  body > header > nav .chip.logo > span:not(.tap-icon) {display: none;}
  body > header > nav .chip.logo:not(.menu) {margin-left: -4px;}

  .chip-avatar {padding-right: 8px;}
  .chevron.submenu {right: 8px; top: 44px;}

  #search-bar input { max-width: 160px;}

}

@media screen and (min-width: 640px) {  
  #search-bar input { min-width: 256px; width: 20vw;}
  .chevron.submenu {right: 0px; top: 40px;}
  .chip:not(.avatar) .tap-icon {background-color: transparent;}
}


@media screen and (max-width: 767px) {
  #bottombar {display: flex; justify-content: center; flex-direction: column; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background-color: var(--css-background-primary-1); border-top: 1px solid var(--css-background-secondary-1);box-shadow: var(--css-box-shadow);}
  #bottombar > .thumb-icons {margin: 4px auto 8px auto; justify-content: space-evenly; align-items: center; flex-direction: row; flex-wrap: nowrap; width: 90%; max-width: 360px;}
  #bottombar > .thumb-icons a {gap: 0;}
  #bottombar > .thumb-icons a::after {font-size: 12px;line-height: 14px;}
  #bottombar > .thumb-icons a .icon-l {background-color: transparent;} 

  body > div.content {flex-direction: column; align-items: center; width: 100%; overflow: hidden;}
  body > div.content > main {width: 100%;}


}

@media screen and (min-width: 768px) {
  body > div.content > aside, body > div.content > nav {width: 80px; }
  #bottombar > .thumb-icons a::after {display: none;}
}

@media screen and (max-width: 1023px) {
  .desktop {display: none;}
  body > footer > div:first-child div {display: grid;gap: 24px;grid-template-columns: repeat(2, 1fr);}
  body > footer > div:first-child section {width: 100%; margin: 0 auto;}
  body > footer > div:last-child div {flex-direction: column;text-align: center;gap: 4px;}
  body > footer > div:last-child ul {justify-content: center;}
}

@media screen and (min-width: 1024px) {

  *[data-tooltip]:hover {position: relative;}
  *[data-tooltip]::before, *[data-tooltip]::after {visibility: hidden;opacity: 0;transition: visibility 0s, opacity 0.3s linear;}
  *[data-tooltip]:hover::before, *[data-tooltip]:hover::after {visibility: visible;opacity: 1;}
  *[data-tooltip]::before {position: absolute;top:-20px;right:-8px;display: block; content: attr(data-tooltip); font-size:  var(--css-fs-s);line-height: 16px; text-align: center; text-indent: 0; border-radius: var(--css-dimensions-border-radius-circle); background-color: var(--css-background-secondary-1); color: var(--css-font-secondary-1); padding: var(--css-gap-8);}
  *[data-tooltip]::after {content: ""; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent var(--css-background-secondary-1) transparent transparent; top: 9px; right: 20px; transform: rotate(-78deg); border-radius: var(--css-dimensions-border-radius);}

  body > div.content > aside, body > div.content > nav {width: 160px; }
  #bottombar > .thumb-icons a::after {display: block;}
  #bottombar > .thumb-icons {flex-direction: column; gap: 0;}
  #bottombar > .thumb-icons > li { width: 100%; }
  #bottombar > .thumb-icons a {width: 100%; flex-direction: row; gap: 16px; padding-top: var(--css-gap-8); padding-bottom: var(--css-gap-8); }
  #bottombar > .thumb-icons a::after {font-size: var(--css-fs-s);}
  #bottombar > .thumb-icons a span {background-color: transparent;border:1px solid var(--css-background-secondary-1);}
  #bottombar > .thumb-icons a:hover span {box-shadow: var(--css-box-shadow);background-size: 35px; }
  #bottombar > .thumb-icons a:hover {color: var(--css-font-primary-1)}

  body > div.content > aside {flex: 0 0 320px; }
  body > div.content:not(.justify-middle) > main {flex-grow: 1; }
}


  body > header {border-bottom: 1px solid var(--css-background-secondary-1);}
  body > header > nav > ul {gap: 8px;}
  body > header > nav {padding: var(--css-gap-16) 0;}

/* mobile */
@media screen and (max-width: 1279px) {

  body > div.content, body > header > nav {padding-left: var(--css-gap-16); padding-right: var(--css-gap-16);}
  body > header > nav > ul {gap: var(--css-gap-8); position: absolute;top: 0;bottom: 0;}
  body > header > nav > ul:first-child { left: var(--css-gap-16);}
  body > header > nav > ul:last-child { right: var(--css-gap-16);}
  body > header > nav > div {width: 100%;justify-content: center;display: flex;text-align: center;}


/*  body {padding-bottom: 80px;}

  body > header > nav {justify-content: center;}
  body > header > nav > ul {gap: 8px;}

  body > header > nav::after {
    content: '';
    display: flex;
    background-color: #fff;
    bottom: 0;
    height: auto;
    left: 0;
    margin-left: 0;
    min-height: 80px;
    padding: 0;
    position: fixed;
    right: 0;
    z-index: 100;
    border-top: 1px solid var(--css-background-secondary-1);
    box-shadow: 0 4px 8px rgba(0,0,0,.32);
      -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32);
      -moz-box-shadow: 0 4px 8px rgba(0,0,0,.32);
  }
  body > header > nav ul {
    bottom: 32px;
    position: fixed;
    z-index: 101;
  }
  body > header > nav ul:first-child {left: 16px;}
  body > header > nav ul:last-child {right: 16px;}
  body > header > nav ul:last-child li:last-child .chevron::after {display: none;}

  body > header > nav ul:last-child {}*/

  #fab {
    position:fixed;
    bottom: 66px;
    margin:24px;
    right: 0;
    z-index: 100;
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 8px rgba(0,0,0,.32);
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32);
    -moz-box-shadow: 0 4px 8px rgba(0,0,0,.32);
  }
  #fab::after {display: none;}

  .columns {gap: var(--css-gap-32);}

}

/* desktop */
@media screen and (min-width: 1280px) {

  body > div.content > aside, body > div.content > nav {width: 320px; }

  body > div.content {padding-left: 0; padding-right: 0; padding-bottom: 32px; flex-direction: row-reverse;}

  body > div.content, body > div.content > main, body > footer > div:last-child {max-width: 1260px; margin-left: auto; margin-right: auto;}
  body > footer > div > div, body > header > nav {max-width:1260px; margin-left: auto; margin-right: auto;}

  .columns {flex-wrap: nowrap;}  
  .columns > * {flex: 1 1 0%;}

  .shadow, .card.border {border: 1px solid var(--css-background-secondary-1);}

}

#inviteFriendsModal {
    /* Stylowanie modalu */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000; /* Upewnij się, że modal jest na wierzchu */
    display: none; /* Ukryj domyślnie */
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Tło z lekkim przyciemnieniem */
    align-items: flex-start;
    justify-content: center;
    animation: showModal 0.3s;
}

.modal-container {
    margin: var(--css-gap-128) auto;
    padding: var(--css-gap-32) var(--css-gap-64);
    border-radius: var(--css-dimensions-border-radius);;
    max-width: 90vw;
    max-width: 1024px;
    max-height: 90vh;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: scaleUp 0.1s ease-in-out;
    z-index: 1001;
    position: absolute;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    border: none;
    background: none;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

/* Animacje */
@keyframes showModal {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes scaleUp {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .modal-container {
        width: 95%;
    }
}

.modal-instance-content {display: none;}





.field-validation {color: var(--css-font-error);}



#hero-mobile {width: 340px; border: 4px solid #000; border-radius: 16px; padding: 24px; min-height: 620px;}
#hero-image {min-height: 20vh; margin-top: var(--css-gap-16)}
#qr-code-reader {width: 500px;height: 500px;}