/* Імпорт шрифтів має відбутися до reset.css */
/* @import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Dekko&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Literata:wght@400;500;600&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); */
button,
input,
::file-selector-button {
    all: unset;
    /* all: initial; */
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
section,
input,
button,
::file-selector-button,
textarea,
select {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    font: inherit;
    vertical-align: baseline;
}



/* a:not([class]) {
  text-decoration-skip-ink: auto;
} */




a {
    text-decoration: none;
    color: inherit;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ul[class],
ol[class]  {
    list-style: none;
    padding: 0;
} */
blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}


/* body {
    touch-action: manipulation;
} */

/* table {
    border-collapse: collapse;
    border-spacing: 0;
} */


/* img {
    max-width: 100%;
    display: block;
} */

/* Указываем понятную периодичность в потоке данных у article*/
/* article > * + * {
   margin-top: 1em;
} */



/* сбрасываем input input type=range  */
/* трек */
/* input[type=range] {
    appearance: none;
    -webkit-appearance: none;
} */

/* тумб */
/* input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-shadow: none;
}

input[type=range]::-moz-range-thumb {
    border: 0;
    -webkit-appearance: none;
    box-shadow: none;
} */
/* === */
.other-user-taste-similarity-section,
.favorite-suitability-section,
.user-taste-uniqueness-section,
.banner-greeting-for-home-page,
.user-card,
.new-favorite-btn,
[class*="flash"] {
    align-items: center;
}
/* === */
.tags-section,
.banner-greeting-for-home-page,
[class*="flash"] {
  justify-content: center;
}
button,
input[type="submit"] {
    cursor: pointer;
}
html {
    /* scroll-behavior: smooth; */
    scroll-behavior: auto;
}

.user-card {
    scroll-snap-align: start;
    /* Прилипає елементи до початку контейнера при прокрутці */
}

/* Вмикає обов'язкове прилипання елементів при горизонтальній прокрутці */
.cofans-bar {
    scroll-snap-type: x mandatory;
}


/* Додає плавне прокручування для iOS пристроїв */
/* .cofans-bar {
        -webkit-overflow-scrolling: touch;
    } */
/* === */

.cofans-bar::-webkit-scrollbar-thumb {
  border-radius: var(--size-m);
}

.progress-bar-container,
.progress-bar,
.new-favorite-btn {
  border-radius: var(--size-s);
}

.user-card {
  border-radius: var(--size-xs);
}
.flash-error,
.flash-alert,
.flash-warning {
    color: var(--color-accent-negative-dark);
}
.flash-error,
.flash-alert,
.flash-warning {
    background-color: var(--color-accent-negative-lighter);
}
.progress-bar {
  background-color: var(--color-accent-neutral-dark);
}
strong,
.tag-for-cofans-favorite,
.flash-notice,
mark,
.please_login {
  color: var(--color-accent-neutral-dark);
}

a:hover {
  color: var(--color-accent-neutral-dark);
}
.flash-notice,
mark,
.please_login,
.follow-btn {
    background-color: var(--color-accent-neutral-lighter);
}
::selection {
    color: var(--color-accent-neutral-lightest);
}
/* a:hover {
    color: var(--color-accent-neutral-medium);
} */
.flash-success {
    color: var(--color-accent-positive-dark);
}
.flash-success {
    background-color: var(--color-accent-positive-lighter);
}
.other-user-taste-similarity-section .progress-bar {
  background-color: var(--color-cofavorite-dark);
}
/* === */
.tag-cofavorites-count,
.other-user-taste-similarity-section .progress-bar-value {
  color: var(--color-cofavorite-dark);
}
.banner-greeting-for-home-page p {
    color: var(--color-cofavorite-lighter);
}
.banner-greeting-for-home-page h1 {
    color: var(--color-cofavorite-lightest);
}
/* .new-favorite-btn:hover {
    background-color: var(--color-favorite-dark);
} */
.tag-for-current-user-favorite {
  color: var(--color-favorite-dark);
}
/* .tag-for-current-user-favorite:hover {
  color: var(--color-favorite-dark);
} */
.new-favorite-btn {
    color: var(--color-favorite-lighter);
}
.new-favorite-btn:hover {
    color: var(--color-favorite-lightest);
}
.new-favorite-btn {
    background-color: var(--color-favorite-medium);
}
/* .current-user-favorites-section strong {
  color: var(--color-favorite-medium);
} */
.tag-for-current-user-favorite:hover {
  color: var(--color-favorite-medium);
}
.cofans-bar {
    background-color: var(--color-neutral-darker);
}
.progress-bar-container,
.cofans-bar::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-light);
}
.share-favorite-btn {
  background-color: var(--color-neutral-lighter);
}
/* === */

.cofans-bar::-webkit-scrollbar-track,
body {
    background-color: var(--color-neutral-lightest);
}
/* .user-card:hover {
    background-color: var(--color-neutral-lightest);
} */
.cofans-bar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-neutral-medium);
}
/* strong {
  color: var(--color-neutral-medium);
} */
:root {
  /* angle */
  --angle: 137.5;
  /* --angle: 223; */

  /* chroma */
  /* назви по призначенню: для світлих або темних кольорів */
  /* --chroma: 0.145; */
  --chroma: 0.13;
  /* --chroma: 0.09; */
  /* --chroma: 0.11; */
  /* --chroma-shift: 0.02; */
  /* --chroma-shift: 0.039; */
  --chroma-shift: 0.04;

  --chroma-lightest: calc(var(--chroma-lighter) - var(--chroma-shift));
  --chroma-lighter: calc(var(--chroma-light) - var(--chroma-shift));
  --chroma-light: calc(var(--chroma-medium) - var(--chroma-shift));
  --chroma-medium: var(--chroma);
  --chroma-dark: calc(var(--chroma-medium) - var(--chroma-shift));
  --chroma-darker: calc(var(--chroma-light) - var(--chroma-shift));
  --chroma-darkest: calc(var(--chroma-lighter) - var(--chroma-shift));

  /* lightness */
  /* --lightness-lightest: 98%;
    --lightness-lighter: 85.0%;
    --lightness-light: 74.0%;
    --lightness-medium: 62.0%;
    --lightness-dark: 47.0%;
    --lightness-darker: 32.0%;
    --lightness-darkest: 21.0%; */

  --lightness-lightest: 97.5%;
  --lightness-lighter: 90%;
  --lightness-light: 77%;
  --lightness-medium: 62%;
  --lightness-dark: 50%;
  --lightness-darker: 38%;
  --lightness-darkest: 24%;

  /* hue */
  --h-blue: 233.8;
  --h-yellow: calc(var(--h-blue) - var(--angle));
  --h-red: calc(var(--h-blue) + var(--angle));
  --h-green: calc(var(--h-red) + var(--angle));
  --h-purple: calc(var(--h-yellow) - var(--angle));

  /* ====================================================================== */

  /* blue */
  --blue-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--h-blue));
  --blue-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--h-blue));
  --blue-light: oklch(var(--lightness-light) var(--chroma-light) var(--h-blue));
  --blue-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--h-blue));
  --blue-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--h-blue));
  --blue-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--h-blue));
  --blue-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--h-blue));

  /* yellow */
  --yellow-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--h-yellow));
  --yellow-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--h-yellow));
  --yellow-light: oklch(var(--lightness-light) var(--chroma-light) var(--h-yellow));
  --yellow-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--h-yellow));
  --yellow-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--h-yellow));
  --yellow-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--h-yellow));
  --yellow-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--h-yellow));

  /* red */
  --red-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--h-red));
  --red-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--h-red));
  --red-light: oklch(var(--lightness-light) var(--chroma-light) var(--h-red));
  --red-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--h-red));
  --red-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--h-red));
  --red-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--h-red));
  --red-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--h-red));

  /* green */
  --green-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--h-green));
  --green-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--h-green));
  --green-light: oklch(var(--lightness-light) var(--chroma-light) var(--h-green));
  --green-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--h-green));
  --green-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--h-green));
  --green-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--h-green));
  --green-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--h-green));

  /* purple */
  --purple-lightest: oklch(var(--lightness-lightest) var(--chroma-lightest) var(--h-purple));
  --purple-lighter: oklch(var(--lightness-lighter) var(--chroma-lighter) var(--h-purple));
  --purple-light: oklch(var(--lightness-light) var(--chroma-light) var(--h-purple));
  --purple-medium: oklch(var(--lightness-medium) var(--chroma-medium) var(--h-purple));
  --purple-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--h-purple));
  --purple-darker: oklch(var(--lightness-darker) var(--chroma-darker) var(--h-purple));
  --purple-darkest: oklch(var(--lightness-darkest) var(--chroma-darkest) var(--h-purple));

  /* bw */
  --bw-lightest: oklch(var(--lightness-lightest) 0 0);
  --bw-lighter: oklch(var(--lightness-lighter) 0 0);
  --bw-light: oklch(var(--lightness-light) 0 0);
  --bw-medium: oklch(var(--lightness-medium) 0 0);
  --bw-dark: oklch(var(--lightness-dark) 0 0);
  --bw-darker: oklch(var(--lightness-darker) 0 0);
  --bw-darkest: oklch(var(--lightness-darkest) 0 0);
}
/* кольори за призначенням */

:root {
    /* --color-favorite - колір для позначення Фаворитів поточного користувача */
    --color-favorite-lightest: var(--red-lightest);
    --color-favorite-lighter: var(--red-lighter);
    --color-favorite-light: var(--red-light);
    --color-favorite-medium: var(--red-medium);
    --color-favorite-dark: var(--red-dark);
    --color-favorite-darker: var(--red-darker);
    --color-favorite-darkest: var(--red-darkest);

    /* --color-cofavorite - колір для позначення Спільних Фаворитів поточного на Іншого користувача */
    --color-cofavorite-lightest: var(--purple-lightest);
    --color-cofavorite-lighter: var(--purple-lighter);
    --color-cofavorite-light: var(--purple-light);
    --color-cofavorite-medium: var(--purple-medium);
    --color-cofavorite-dark: var(--purple-dark);
    --color-cofavorite-darker: var(--purple-darker);
    --color-cofavorite-darkest: var(--purple-darkest);

    /* --color-accent-neutral - колір для позначення емоційно нейтральних акцентів */
    --color-accent-neutral-lightest: var(--blue-lightest);
    --color-accent-neutral-lighter: var(--blue-lighter);
    --color-accent-neutral-light: var(--blue-light);
    --color-accent-neutral-medium: var(--blue-medium);
    --color-accent-neutral-dark: var(--blue-dark);
    --color-accent-neutral-darker: var(--blue-darker);
    --color-accent-neutral-darkest: var(--blue-darkest);

    /* --color-accent-positive - колір для позначення позитивних акцентів (success, etc) */
    --color-accent-positive-lightest: var(--green-lightest);
    --color-accent-positive-lighter: var(--green-lighter);
    --color-accent-positive-light: var(--green-light);
    --color-accent-positive-medium: var(--green-medium);
    --color-accent-positive-dark: var(--green-dark);
    --color-accent-positive-darker: var(--green-darker);
    --color-accent-positive-darkest: var(--green-darkest);

    /* --color-accent-negative - колір для позначення негативних акцентів (error, etc) */
    --color-accent-negative-lightest: var(--yellow-lightest);
    --color-accent-negative-lighter: var(--yellow-lighter);
    --color-accent-negative-light: var(--yellow-light);
    --color-accent-negative-medium: var(--yellow-medium);
    --color-accent-negative-dark: var(--yellow-dark);
    --color-accent-negative-darker: var(--yellow-darker);
    --color-accent-negative-darkest: var(--yellow-darkest);

    /* --color-neutral - колір для нейтральних елементів (основний фон, текст, etc) */
    --color-neutral-lightest: var(--bw-lightest);
    --color-neutral-lighter: var(--bw-lighter);
    --color-neutral-light: var(--bw-light);
    --color-neutral-medium: var(--bw-medium);
    --color-neutral-dark: var(--bw-dark);
    --color-neutral-darker: var(--bw-darker);
    --color-neutral-darkest: var(--bw-darkest);
}
:root {
    --gradient-horizontal-1-medium: linear-gradient(to right, var(--color-favorite-medium), var(--color-cofavorite-medium), var(--color-accent-neutral-medium));
    --gradient-horizontal-1-light: linear-gradient(to right, var(--color-favorite-light), var(--color-cofavorite-light), var(--color-accent-neutral-light));
    --gradient-horizontal-1-lighter: linear-gradient(to right, var(--color-favorite-lighter), var(--color-cofavorite-lighter), var(--color-accent-neutral-lighter));
}
::selection {
    background-color: var(--color-accent-neutral-medium);
}
/* === */
.other-user-taste-similarity-section,
.favorite-suitability-section,
.user-taste-uniqueness-section,
.banner-greeting-for-home-page,
.user-card {
    flex-direction: column;
}
/* === */
.tags-section,
.progress-bar-label,
.progress-bar-container,
.other-user-taste-similarity-section,
.favorite-suitability-section,
.user-taste-uniqueness-section,
.banner-greeting-for-home-page,
.user-card,
.cofans-bar,
.favorite-cofans-section,
.favorite-fans-section,
.new-favorite-btn,
[class*="flash"] {
  display: flex;
}
.font-align-center,
h1 {
  text-align: center;
}
:root {
  color: var(--color-neutral-darker);
}
/* font family import  --- in preload.css file*/

:root {
  /* font-family: 'Literata', serif; */
  /* font-family: "Noto Serif", serif; */
  /* font-family: "Noto Sans", serif; */
  font-family: "Nunito", sans-serif;

  /* font-family: "Noto Sans", sans-serif; */
  /* --font-secondary: 'Montserrat', sans-serif; */
}
/* переноси слів граматичні та примусові */
body {
  -webkit-hyphens: auto; /* Для Chrome, Safari */
  -ms-hyphens: auto; /* Для Internet Explorer 10+ */
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* line-heght */
/* ================================================================= */
:root {
    /* 1ex - ставить строки впритул,
    а наступні значення віддаляють їх на бажане значення */
    --line-heigh-s: calc(1ex + var(--size-s));
    --line-heigh-m: calc(1ex + var(--size-m));
    /* --line-heigh-m - від строки до строки 1ex */
    --line-heigh-l: calc(1ex + var(--size-l));
    --line-heigh-xl: calc(1ex + var(--size-xl));
}

h3,
h4,
p,
small {
    line-height: var(--line-heigh-l);
}

h1,
h2 {
    line-height: var(--line-heigh-m);
}
/* text rendering  */
/* ================================================================= */
body {
    text-rendering: optimizeLegibility;
    /* text-rendering: optimizeSpeed; */
    /* text-rendering: geometricPrecision; */
}
/* :root { 
    font-size-adjust: from-font;
} */

/* визначаємо чому буде рівний 1rem */
:root {
  --x-height: 9px;
  /* --x-height: 1.31556174vmin; */
  --x-height-ratio: 0.507;
  /* --x-height-ratio: 0.53; */
  --font-size: calc(var(--x-height) / var(--x-height-ratio));
  /* --font-size: 16px; */
  font-size: var(--font-size);
}

/* заборона масштабування шрифту в моб браузерах */
:root {
  -webkit-text-size-adjust: 100%;
}

:root {
  font-optical-sizing: auto;
}

:root {
  --font-size-xs: calc(var(--font-size) / var(--ratio) / var(--ratio));
  --font-size-s: calc(var(--font-size) / var(--ratio));
  --font-size-m: var(--font-size);
  --font-size-l: calc(var(--font-size) * var(--ratio));
  --font-size-xl: calc(var(--font-size) * var(--ratio) * var(--ratio));
  --font-size-2xl: calc(
    var(--font-size) * var(--ratio) * var(--ratio) * var(--ratio)
  );
}

/* розміри шрифта для ОКРЕМИХ єлементів відносно КОРЕНЯ */
body,
h4,
input,
textarea,
button {
  font-size: var(--font-size-m);
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-l);
}

small {
  font-size: var(--font-size-s);
}

sub {
  font-size: var(--font-size-xs);
}
button,
.flash-msg,
input[type="submit"],
input[type="file"]::file-selector-button {
    text-transform: capitalize;
}

/* UPPERCASE */
/* ================================================================= */
/* button,
input[type="submit"],
input[type="file"]::file-selector-button {
    text-transform: uppercase;
} */
.font-truncate {
    /*display: inline-block;  або block, якщо треба, щоб текст займав весь рядок */
    max-width: 100%; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* body {
    font-weight: 400;
} */

button,
h3,
h4,
.new-favorite-btn,
a,
strong,
h1,
h2,
b {
  font-weight: 700;
}
/* === */
.tags-section {
  gap: var(--size-l);
}

.cofans-bar,
.favorite-cofans-section,
.favorite-fans-section {
  gap: var(--size-2xs);
}
   /* img {
       object-fit: contain;
   } */
.banner-greeting-for-home-page h1 {
    margin: 0;
}
.new-favorite-btn {
    margin-bottom: var(--size-l);
}
.icon-chevron-right {
  margin-left: var(--size-m);
}
.progress-bar-value {
  margin-right: var(--size-s);
}
/* для коректних марджинів текста потрібно відняди від марджина line-height висоту від "x"  до найвищої літери поточного шрифта */
h1,
p {
  margin-top: var(--size-m);
}



#recommendations_settings {
  margin-top: var(--size-xl);
}

h2,
h3,
.tags-section,
.progress-bar-label {
  margin-top: var(--size-2xl);
}

.other-user-taste-similarity-section,
.favorite-suitability-section,
.user-taste-uniqueness-section {
  margin-top: var(--size-3xl);
}
.guest-auth-links-bar {
    display: flex;
    padding-top: var(--size-l);
    padding-bottom: var(--size-l);
    flex-wrap: wrap;
    /* background: linear-gradient(to right, var(--color-accent-negative-lighter), var(--color-accent-negative-light)); */
    /* background: linear-gradient(to right, var(--color-accent-positive-lighter), var(--color-accent-neutral-light)); */
    background: linear-gradient(to right, var(--color-favorite-medium), var(--color-cofavorite-medium), var(--color-accent-neutral-medium));
    align-items: center;
    justify-content: space-evenly;
    color: var(--color-neutral-lightest);
}
.category-stats {
    margin-top: var(--size-2xl);
    font-size: var(--font-size-s);
}
  .category-page-latest-favorites-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    /* background-color: rgb(211, 227, 237); */
  }
  .category-page-popular-favorites-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    /* background-color: rgb(211, 227, 237); */
  }
  .category-page-recommended-favorites-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    /* background-color: rgb(211, 227, 237); */
  }
.cofans-bar {
    padding-left: var(--size-4xs);
}
.cofans-bar-header {
    display: flex;
    gap: var(--size-m);
    padding-top: var(--size-l);
    padding-bottom: var(--size-l);
    padding-left: var(--size-2xl);
    padding-right: var(--size-l);
    /* font-size: var(--font-size-s); */
    /* color: var(--color-neutral-dark); */
    color: var(--color-favorite-lightest);
    align-items: center;
    justify-content: center;
    /* justify-content: start; */
    /* border-bottom: 1px var(--color-neutral-lighter) solid; */

    /* background-color: white; */
    /* background-color: var(--color-neutral-light); */
    /* background-color: var(--color-neutral-lighter); */
    background: var(--gradient-horizontal-1-medium);
    /* background: var(--gradient-horizontal-1-light); */
    /* background: var(--gradient-horizontal-1-lighter); */
}

.cofans-bar-header strong {
    color: var(--color-favorite-lightest);
}
.explanation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding-left: var(--size-2xl);
    padding-right: var(--size-2xl);
    padding-top: var(--size-2xl);
    padding-bottom: var(--size-2xl);

    font-size: var(--font-size-s);

    gap: var(--size-l);
    width: 62%;

    border-radius: var(--size-xl);
    /* background-color: var(--color-neutral-lighter); */
    /* background-color: white; */
}
/* посилання на секцію фаворити користувача з пропозицією додати більше фаворитів щоб отримати кращі рекомендації*/
.add-more-favorites-link {
  margin-top: var(--size-2xl);
  margin-bottom: var(--size-3xl);
  margin-left: var(--size-l);
  margin-right: var(--size-l);
  text-align: center;
}
/* кнопки Додати / Видалити з улюбленого */

/* контейнер для кнопки видалити */
.add-to-favorites-btn-container,
.remove-from-favorites-btn-container {
  width: 100%;
}

/* кнопка видалення з фаворитів */
.add-to-favorites-btn,
.remove-from-favorites-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-top: 1px solid var(--color-neutral-lighter);
  width: 100%;
  height: var(--size-4xl);
  font-size: var(--font-size-s);
}

/* текст для кнопки */
.text-for-add-to-favorites-btn,
.text-for-remove-from-favorites-btn {
  margin-top: 0;
  text-align: center;
  /* text-transform: uppercase; */
}









/* текст-підказка при наведенні мишки: Видалити з фаворитів */
/* .remove-from-favorites-btn:hover .text-for-remove-from-favorites-btn::after {
  display: flex;
  content: attr(data-hover-text-for-remove-from-favorites-btn);
  color: var(--color-favorite-medium);
} */
/* спільний контейнер для всіх кнопок додавання та видалення */
/* NB! наразі застосовується лише на сторінці фаворита (НЕ в картці фаворита) */

.add_and_remove_from_favorites_buttons_container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    position: fixed;
    bottom: 0;

    gap: var(--size-4xs);

    background-color: var(--color-neutral-lighter);
}


/* індивідуальні контейнери для кнопки Додати та кнопки Видалити з обраного */
.add_and_remove_from_favorites_buttons_container .remove-from-favorites-btn-container,
.add_and_remove_from_favorites_buttons_container .add-to-favorites-btn-container {
    width: auto;
    flex-grow: 1;
}
/* кнопка Додати до обраного */
.add-to-favorites-btn {
    color: var(--color-accent-neutral-dark);
}



/* текст та іконка при наведенні */
.add-to-favorites-btn:hover .icon-for-add-to-favorites-btn,
.add-to-favorites-btn:hover .text-for-add-to-favorites-btn {
    color: var(--color-accent-neutral-medium);
}
/* ВСІ ЕЛЕМЕНТИ РОЗТАШОВАНІ НА КАРТЦІ ФАВОРИТА (окрім кнопки додати/видалити з улюблених) */

/* картка фаворита (загальний контейнер) */
.favorite-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--size-l);
  margin-bottom: var(--size-l);
  background-color: var(--color-neutral-lightest);
  max-width: 100%;
}

/* лінк в якому лежать фото та назва фаворита - веде на сторінку фаворита */
.favorite-card-link {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* фото в картці фаворита  */
.favorite-card img {
  width: 100%;
  background-color: white;
}

/* заголовок в картці фаворита */
.favorite-card h4 {
  font-weight: bold;
  text-align: center;
  margin-top: var(--size-l);
  margin-left: var(--size-xl);
  margin-right: var(--size-xl);
}

/* контейнер для метаданих */
.favorite-card-metadata-container {
  display: flex;
  gap: var(--size-m);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--size-xl);
  padding-left: var(--size-2xl);
  padding-right: var(--size-2xl);
  font-size: var(--font-size-s);
  color: var(--color-neutral-medium);
}

/* метадані Фаворита  у вигляді тегів */
.favorite-card-metadata-added-at,
.favorite-card-metadata-comments-count,
.favorite-card-metadata-suitability,
.favorite-card-metadata-cofans-count,
.favorite-card-metadata-fans-count,
.favorite-card-metadata-popularity,
.favorite-card-metadata-category {
  padding-top: var(--size-m);
  padding-bottom: var(--size-m);
  padding-left: var(--size-l);
  padding-right: var(--size-l);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-neutral-lighter);
  border-radius: 6px;
  background-color: white;
}

/* div з описом (p) Фаворита */
.favorite-card-summary {
  font-size: var(--font-size-s);
  padding-top: var(--size-2xl);
  padding-left: var(--size-3xl);
  padding-right: var(--size-3xl);
  text-align: justify;
}

/* Контейнер для кнопок активності */
.favorite-card-action-container {
  display: flex;
  width: calc(100% - 2 * var(--size-3xl));
  justify-content: center;
  gap: var(--size-xl);
  flex-wrap: wrap;
  font-size: var(--font-size-s);
  color: var(--color-neutral-medium);
  margin-top: var(--size-xl);
  margin-bottom: var(--size-3xl);
}

/* кнопки "Зберегти на Потім" та "Читати Далі" */
.favorite-card-action-read-more-link,
.favorite-card-action-save-for-later-btn {
  display: flex;
  font-size: var(--font-size-s);
  align-items: center;
}

/* окремий колір лінків в картці фаворита при наведенні (тільки в секції фаворитів поточного користувача) */
.current-user-favorites-section .favorite-card a:hover {
  color: var(--color-favorite-medium);
}
.favorite-content-original-source {
  display: flex;
  margin-top: var(--size-xl);
  /* margin-bottom: var(--size-2xl); */
  /* justify-content: center; */
}
/* автора (кріейтор) Фаворита - той хто додав першим лінк на вікі і створив Фаворит */
/* відображається внизу стоінки show Фаворита */
.favorite-creator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--size-3xl);
    /* gap: var(--size-xs); */
    /* background-color: blanchedalmond; */
}

/* лінк на користувача який містить аватар та ім'я користувача */
.favorite-creator a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-m);
}

/* аватарка користувача */
.favorite-creator a img {
    border-radius: var(--size-m);
}
.favorite-delete-btn {
    padding-left: var(--size-xl);
    padding-right: var(--size-xl);
    padding-top: var(--size-l);
    padding-bottom: var(--size-l);

    margin-top: var(--size-2xl);
    margin-bottom: var(--size-m);

    border-radius: var(--size-m);
    background-color: var(--color-accent-negative-lighter);
}
/* ======= ОПИС ФАВОРИТА ================= start */
.favorite-description {
  columns: 2;
  column-gap: var(--size-2xl);
  padding-left: var(--size-3xl);
  padding-right: var(--size-3xl);
  text-align: justify;
  /* width: 38vw; */
  /* width: 62vw; */
  /* background-color: aqua; */
  margin-top: var(--size-2xl);
  margin-bottom: var(--size-3xl);
}

.favorite-description p {
  margin-top: var(--size-xl);
}

.favorite-description p:nth-child(1) {
  margin-top: 0;
}

/* мобільні */
@media (orientation: portrait) {
  .favorite-description {
    columns: 1;
    padding-left: var(--size-xl);
    padding-right: var(--size-xl);
    /* width: 90vw; */
  }
}

/* Планшети */
@media (max-width: 1024px) {
  .favorite-description {
    columns: 1;
    padding-left: var(--size-2xl);
    padding-right: var(--size-2xl);
    column-gap: var(--size-2xl);
  }
}

/* Великі екрани */
@media (min-width: 1441px) {
  .favorite-description {
    columns: 3;
  }
}
/* КОНТЕЙНЕР З ФАВОРИТАМИ */

.favorites-cards-container {
  columns: 4;
  column-fill: balance;
  column-gap: var(--size-l);
  padding: var(--size-l);
  margin-top: var(--size-2xl);
  /* background-color: var(--color-accent-neutral-darker); */
  background-color: var(--color-neutral-light);
  width: 100%;
  max-width: 100%;
}

/* контейнер з фаворитами для мобільного та портрета */
@media (orientation: portrait) {

  /* .new-favorite-page label, */
  .favorites-cards-container {
    padding-top: var(--size-l);
    padding-bottom: var(--size-l);
    padding-left: var(--size-m);
    padding-right: var(--size-m);
  }
}

/* кількість колонок для різної ширіни екрану браузера (= різних пристрроїв) */
@media (max-width: 1200px) {
  .favorites-cards-container {
    columns: 3;
    /* На екранах менше 1200px */
  }
}

@media (max-width: 900px) {
  .favorites-cards-container {
    columns: 2;
  }
}

/* Для планшетів і великих телефонів*/
@media (max-width: 768px) {
  .favorites-cards-container {
    columns: 1;
  }
}

/* Для маленьких телефонів */
@media (max-width: 480px) {
  .favorites-cards-container {
    columns: 1;
  }
}
.next-cofans-favorite-btn {
    display: flex;
    margin-top: var(--size-4xl);
    align-items: center;
    /* justify-content: center; */
}
/* кнопка Видалити з обраного */
.remove-from-favorites-btn {
    color: var(--color-favorite-dark);
}

/* текст та іконка при наведенні */
.remove-from-favorites-btn:hover .icon-for-remove-from-favorites-btn,
.remove-from-favorites-btn:hover .text-for-remove-from-favorites-btn {
    color: var(--color-favorite-medium);
}
footer {
  display: flex;
  flex-wrap: wrap;
  /* height: var(--size-5xl); */
  padding-top: var(--size-3xl);
  padding-bottom: var(--size-4xl);

  margin-top: var(--size-3xl);

  justify-content: space-evenly;
  align-items: center;

  background-color: var(--color-neutral-darkest);
  color: var(--color-neutral-light);
}
input[type="checkbox"] {
  width: var(--size-xl);
  height: var(--size-xl);
  margin-right: var(--size-m);
  border: 1px solid var(--color-neutral-light);
  border-radius: var(--size-s);
  position: relative;
  cursor: pointer;
  background-color: white;
  transition: all 0.2s ease-in-out;
}

/* Стилізація активного чекбокса */
input[type="checkbox"]:checked {
  background-color: var(--color-neutral-medium);
  border-color: var(--color-neutral-dark);
}

input[type="checkbox"]::before {
  content: "✔";
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

/* Показує галочку при виборі */
input[type="checkbox"]:checked::before {
  opacity: 1;
}
textarea,
input,
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path fill='gray' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--size-l) center;
  background-size: var(--size-xl);
  padding-right: var(--size-xl);
}

/* поля форми */
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
  display: flex;
  width: 100%;
  background-color: white;
  border: 1px solid var(--color-neutral-light) !important;
  border-radius: var(--size-s);
  padding-left: var(--size-l);
  padding-top: var(--size-l);
  padding-bottom: var(--size-l);
  margin-top: var(--size-l);
  box-sizing: border-box;
}
label {
  font-size: var(--font-size-l);
  font-weight: 700;
}
textarea::placeholder,
input::placeholder {
  color: var(--color-neutral-light);
}
input[type="submit"] {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-left: var(--size-m);
  padding-right: var(--size-m);
  padding-top: var(--size-m);
  padding-bottom: var(--size-m);
  box-sizing: border-box;
  width: 100%;
  font-size: var(--font-size-l);
  font-weight: 700;
  color: var(--color-accent-neutral-lightest);
  background-color: var(--color-accent-neutral-dark);
  border-radius: var(--size-s);
  margin-top: var(--size-2xl);
  margin-bottom: var(--size-3xl);
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  /* min-height: 100vh; */

  /* background-color: bisque; */
}
/* текст Favoteca в main_menu який виконує роль логотипа і одночасно посилання на головну сторінку */
.favoteca-text-link {
    font-weight: 900;
    font-size: var(--font-size-l);
    background: linear-gradient(to left, var(--color-accent-neutral-dark), var(--color-cofavorite-dark), var(--color-favorite-medium));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main-menu {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    justify-content: space-evenly;
    align-items: center;
    gap: var(--size-l);
    padding-top: var(--size-l);
    padding-bottom: var(--size-l);
    padding-left: var(--size-m);
    padding-right: var(--size-m);
}
/* меню для фаворита та поточного користувача */
.category-menu,
.favorite-menu,
.current-user-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--size-xl);
  row-gap: var(--size-m);
  /* background-color: bisque; */
  margin-top: var(--size-4xl);
  padding-left: var(--size-3xl);
  padding-right: var(--size-3xl);
  width: 100%;
  border-bottom-width: var(--size-3xs);
  border-bottom-style: solid;
  border-bottom-color: var(--color-neutral-lighter);
}

.category-menu .menu-item,
.current-user-menu .menu-item,
.favorite-menu .menu-item {
  display: flex;
  margin-top: 0;
  font-size: var(--font-size-m);
  /* background-color: rgb(195, 147, 89); */
  padding-top: var(--size-l);
  padding-bottom: var(--size-l);
}

.category-menu .menu-item strong,
.current-user-menu .menu-item strong,
.favorite-menu .menu-item strong {
  margin-left: var(--size-s);
}

/* активний елемент меню */
.menu-item-active {
  /* color: var(--color-cofavorite-medium); */
  /* border-bottom: 2px solid var(--color-cofavorite-medium); */
  border-bottom-width: var(--size-3xs);
  border-bottom-style: solid;
  border-bottom-color: var(--color-accent-neutral-dark);
}
.about-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 62vw;
  /* background: greenyellow; */
}
.category-page {
    /* background: rgb(219, 230, 221); */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* сторінка з контактами для Favoteca  */
.contact-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-page h1 {
    margin-top: var(--size-l);
}

.contact-page-text-intro {
    margin-top: var(--size-3xl);
    width: 62vw;
    text-align: center;
}

.contact-page-email {
    margin-top: var(--size-xl);
}
.favorite-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* .favorite-page h1 { */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* background-color: aqua; */
/* text-align: center; */
/* } */
.all-favorites-in-category-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: var(--size-l);
    padding-right: var(--size-l);
    padding-top: var(--size-xl);
    padding-bottom: var(--size-xl);
    width: 100%;
    max-width: 100%;
    border-bottom: 1px var(--color-neutral-lighter) solid;
}
.hero-message-container {
    background-color: var(--color-neutral-lighter);
    width: 100%;
}

.hero-message-text {
    font-size: var(--font-size-l);
    font-weight: 800;
    /* margin-top: var(--size-3xl); */
    /* margin-top: calc(38vw/2); */
    /* margin-top: 24vh; */
    /* margin-bottom: 24vh; */
    /* margin-bottom: calc(38vw/2); */
    /* margin-left: calc(38vw/2); */
    /* margin-right: calc(38vw/2); */
    margin: calc(38vw/2);
    text-align: center;
    background: linear-gradient(to left, var(--color-accent-neutral-dark), var(--color-cofavorite-dark), var(--color-favorite-medium));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-page-favorites-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  /* background-color: rgb(189, 227, 203); */
}
/* сторінка для створення нового фаворита (через додавання лінка на вікі) */
.new-favorite-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 100%;
  /* padding-top: var(--size-2xl); */
  padding-bottom: var(--size-4xl);
}

.new-favorite-page h1 {
  /* margin-top: 0; */
}

/* ландшафтна орієнтація */
@media (orientation: landscape) {
  .new-favorite-page form {
    width: 62vw;
  }

  .new-favorite-mobile-title {
    display: none;
  }
}

/* портретна орієнтація */
@media (orientation: portrait) {
  .new-favorite-page form {
    width: calc(100% - 2 * var(--size-l));
    box-sizing: border-box;
  }

  .new-favorite-desktop-title {
    display: none;
  }
}

/* лейбл для форми */
.new-favorite-page label {
  /* font-size: var(--font-size-m); */
  display: flex;
  flex-direction: column;
  margin-top: var(--size-l);
}


.new-favorite-page textarea {
  margin-top: var(--size-3xl);
}

/* кнопка встаити з буфера */
.paste-from-clipboard-btn {
  margin-top: var(--size-xl);
}

.new-favorite-page input[type=submit] {
  /* margin-top: 0; */
  /* color: greenyellow; */
}
/* сторінка редагування профілю користувача */
.user-edit-profile-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-top: var(--size-4xl);
}

/* форма що містить поля для редагування */
.user-edit-profile-page form {
  max-width: 100%;
  /* margin-top: var(--size-2xl); */
  /* margin-bottom: var(--size-3xl); */
}

/* аватар користуача */
.user-edit-profile-page img {
  margin-top: var(--size-4xl);
}

/* ширіна форми для - Ландшафтна орієнтація */
@media (orientation: landscape) {
  .user-edit-profile-page .device-links,
  .user-edit-profile-page form {
    width: 38vw;
  }
}

/* ширіна форми для - Портретна орієнтація */
@media (orientation: portrait) {
  .user-edit-profile-page .device-links,
  .user-edit-profile-page form {
    width: calc(100% - 2 * var(--size-2xl));
    box-sizing: border-box;
  }
}

/* окремі поля форми які містять в собі лейбли та інпути */
.user-edit-profile-page .field {
  display: flex;
  flex-direction: column;
  margin-top: var(--size-3xl);
}

/* чекбокс для видалення аватару */
.remove-avatar-checkbox-container {
  display: flex;
  align-items: center;
  margin-top: var(--size-l);
}

/* для лейблів визначено загальний розмір та вагу фонтів в label.css - тому тут треба трохи підкорегувати */
/* TODO: ? відмовитись від загального стилю для лейблів ? */
.remove-avatar-checkbox-container label {
  font-size: var(--font-size-m);
  font-weight: 400;
}

/* cancel-my-account-btn */
.user-edit-profile-page .cancel-my-account-btn {
  margin-top: var(--size-2xl);
  margin-bottom: var(--size-3xl);
}
/* сторінка реєстрації нового користувача */
.user-sign-up-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-top: var(--size-4xl);
  padding-bottom: var(--size-4xl);
}

/* форма що містить поля реєстрації */
.user-sign-up-page form {
  max-width: 100%;
  margin-top: var(--size-2xl);
  margin-bottom: var(--size-3xl);
}

/* ширіна форми для - Ландшафтна орієнтація */
@media (orientation: landscape) {
  .user-sign-up-page .device-links,
  .user-sign-up-page form {
    width: 38vw;
  }
}

/* ширіна форми для - Портретна орієнтація */
@media (orientation: portrait) {
  .user-sign-up-page .device-links,
  .user-sign-up-page form {
    width: calc(100% - 2 * var(--size-2xl));
    box-sizing: border-box;
  }
}

/* окремі поля форми які містять в собі лейбли та інпути */
.user-sign-up-page .field {
  display: flex;
  flex-direction: column;
  margin-top: var(--size-3xl);
}

/* це додаткові лінки після основної форми - типу log in або forgot password?  */
/* <%= render "devise/shared/links" %> - знаходяться в цьому партіалі і йшли в комплекті з device */
.user-sign-up-page .device-links {
  margin-top: var(--size-2xl);
}
/* контейнер з пагінацією */
.pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: var(--size-xl);
    padding-top: var(--size-xl);
    padding-bottom: var(--size-xl);
    padding-left: var(--size-l);
    padding-right: var(--size-l);
    /* background-color: rgb(217, 255, 127); */
}

/* поточна сторінка (цифра) */
.pagination .current {
    font-weight: 900;
    color: var(--color-accent-neutral-dark);
}

.pagination .first {}

.pagination .prev {}

.pagination .page {}

.pagination .next {}

.pagination .last {}
.tag {
    font-size: var(--font-size-s);
}
.tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;

    gap: var(--size-l);

    padding: var(--size-3xl);
    margin-top: var(--size-2xl);
    margin-bottom: var(--size-3xl);
    margin-left: var(--size-l);
    margin-right: var(--size-l);

    color: var(--color-accent-positive-dark);
    background-color: var(--color-accent-positive-lighter);

    border-radius: var(--size-l);
}
/* секція з фаворитами поточного користувача */
.current-user-favorites-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  /* background-color: white; */
}

/* лічильники в секції з фаворитами поточного користувача виділяємо кольором для улюбленого */
.current-user-favorites-section strong {
  color: var(--color-favorite-dark);
}

/* кількість колонок в секціі Улюблене в профілі поточного користувача */
.current-user-favorites-section .favorites-cards-container {
  columns: 5;
}

/* Для планшетів (максимальна ширина 1024px) */
@media (max-width: 1024px) {
  .current-user-favorites-section .favorites-cards-container {
    columns: 3;
  }
}

/* Для мобільних пристроїв (максимальна ширина 768px) */
@media (max-width: 768px) {
  .current-user-favorites-section .favorites-cards-container {
    columns: 2;
  }
}
.current-user-recommended-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  /* background-color: var(--color-accent-neutral-lightest); */
}
/* секція зі спільними фаворитами в профілі other user */
.other-user-cofavorites-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  /* background-color: blanchedalmond; */
}
/* секція з власними фаворитами в профілі other user */
.other-user-own-favorites-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  /* background-color: blanchedalmond; */
}
.user_first_greeting {
    /* width: 62vw; */
    text-align: justify;

    margin-top: var(--size-xl);

    padding-top: var(--size-2xl);
    padding-bottom: var(--size-2xl);
    padding-left: var(--size-3xl);
    padding-right: var(--size-3xl);

    border-radius: var(--size-xl);

    /* font-weight: bold; */

    color: var(--color-favorite-darker);
    background: var(--gradient-horizontal-1-lighter);
}

/* Для ландшафтної орієнтації */
@media (orientation: landscape) {
    .user_first_greeting {
        width: 62vw;
        /* margin-left: auto;
        margin-right: auto; */
    }
}

/* Для портретної орієнтації */
@media (orientation: portrait) {
    .user_first_greeting {
        /* width: auto; */
        margin-left: var(--size-xl);
        margin-right: var(--size-xl);
    }
}
/* НЕ ВИКОРИСТОВУЄТЬСЯ */
/* класс спільний для окремих секцій в профілі користувача: фаворити, спільні фаворити, власні фаворити, рекомендоиане, відкладене, тощо  */
.user-profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  /* background-color: white; */
}
.progress-bar-container {
  overflow: hidden;
}

/* Додає горизонтальну прокрутку, якщо контент не вміщується */
.cofans-bar {
  overflow-x: auto;
}
.cofans-bar {
    padding-bottom: var(--size-2xs);
}

.user-card {
    padding-bottom: var(--size-s);
}
mark {
    padding-left: 1ch;
}

.new-favorite-btn {
    padding-left: var(--size-xl);
}
mark {
    padding-right: 1ch;
}


.new-favorite-btn {
    padding-right: var(--size-xl);
}
.cofans-bar {
    padding-top: var(--size-2xs);
}
/* пропорція згідно якої створені розміри елементів, шрифту, а також кольори (?) */

:root {
    /* --ratio: 1.24; */
    /* --ratio: 1.38; */
    --ratio: 1.61803398875;
}
.progress-bar {
  height: 100%;
}

.banner-greeting-for-home-page {
  /* height: var(--size-7xl); */
  height: 62vh;
}

[class*="flash"] {
  height: var(--size-3xl);
}

.cofans-bar::-webkit-scrollbar {
  height: var(--size-l);
}

.progress-bar-container {
  height: var(--size-s);
}
/* --ratio: визначено у одноіменному файлі css  */


:root {

    --size-10xs: calc(var(--size-9xs) / var(--ratio));
    --size-9xs: calc(var(--size-8xs) / var(--ratio));
    --size-8xs: calc(var(--size-7xs) / var(--ratio));
    --size-7xs: calc(var(--size-6xs) / var(--ratio));
    --size-6xs: calc(var(--size-5xs) / var(--ratio));
    --size-5xs: calc(var(--size-4xs) / var(--ratio));
    --size-4xs: calc(var(--size-3xs) / var(--ratio));
    --size-3xs: calc(var(--size-2xs) / var(--ratio));
    --size-2xs: calc(var(--size-xs) / var(--ratio));
    --size-xs: calc(var(--size-s) / var(--ratio));
    --size-s: calc(var(--size-m) / var(--ratio));
    --size-m: 1ex;
    --size-l: calc(var(--size-m) * var(--ratio));
    --size-xl: calc(var(--size-l) * var(--ratio));
    --size-2xl: calc(var(--size-xl) * var(--ratio));
    --size-3xl: calc(var(--size-2xl) * var(--ratio));
    --size-4xl: calc(var(--size-3xl) * var(--ratio));
    --size-5xl: calc(var(--size-4xl) * var(--ratio));
    --size-6xl: calc(var(--size-5xl) * var(--ratio));
    --size-7xl: calc(var(--size-6xl) * var(--ratio));
    --size-8xl: calc(var(--size-7xl) * var(--ratio));
    --size-9xl: calc(var(--size-8xl) * var(--ratio));
    --size-10xl: calc(var(--size-9xl) * var(--ratio));


    /* 
    --size-1: 0.11862413vmin;
    --size-2: 0.19193787vmin;
    --size-3: 0.310562vmin;
    --size-4: 0.50249987vmin;
    --size-5: 0.81306187vmin;
    --size-6: 1.31556174vmin;
    --size-7: 2.12862361vmin;
    --size-8: 3.44418536vmin;
    --size-9: 5.57280897vmin;
    --size-10: 9.01699434vmin;
    --size-11: 14.58980333vmin;
    --size-12: 23.6067977vmin;
    --size-13: 38.19660107vmin;
    --size-14: 61.80339883vmin;
    --size-15: 100.0vmin;

    --ex-1: 1.0ex;
    --ex-2: 1.61803399ex;
    --ex-3: 2.61803399ex;
    --ex-4: 4.23606799ex;
    --ex-5: 6.85410199ex;
    --ex-6: 11.09016999ex;
    --ex-7: 17.94427199ex;
    --ex-8: 29.03444201ex;
    --ex-9: 46.97871405ex;
    --ex-10: 76.01315615ex;
    --ex-11: 122.99187033ex;
    --ex-12: 199.00502669ex;
 */


    /* 
    --ps-100: 100.0%;
    --ps-62: 61.80339883%;
    --ps-38: 38.19660107%;
    --ps-23: 23.6067977%;
    --ps-14: 14.58980333%;
    --ps-9: 9.01699434%;
    --ps-5: 5.57280897%;
    --ps-3: 3.44418536%;
    --ps-2: 2.12862361%;
    --ps-1: 1.31556174%;
    --ps-08: 0.81306187%;
    --ps-05: 0.50249987%;
    --ps-03: 0.310562%;
    --ps-02: 0.19193787%;
    --ps-01: 0.11862413%; */

    /* --vh-100: 100.0vh;
    --vh-62: 61.80339883vh;
    --vh-38: 38.19660107vh;
    --vh-23: 23.6067977vh;
    --vh-14: 14.58980333vh;
    --vh-9: 9.01699434vh;
    --vh-5: 5.57280897vh;
    --vh-3: 3.44418536vh;
    --vh-2: 2.12862361vh;
    --vh-1: 1.31556174vh;
    --vh-08: 0.81306187vh;
    --vh-05: 0.50249987vh;
    --vh-03: 0.310562vh;
    --vh-02: 0.19193787vh;
    --vh-01: 0.11862413vh; */

    /* --vw-100: 100.0vw;
    --vw-62: 61.80339883vw;
    --vw-38: 38.19660107vw;
    --vw-23: 23.6067977vw;
    --vw-14: 14.58980333vw;
    --vw-9: 9.01699434vw;
    --vw-5: 5.57280897vw;
    --vw-3: 3.44418536vw;
    --vw-2: 2.12862361vw;
    --vw-1: 1.31556174vw;
    --vw-08: 0.81306187vw;
    --vw-05: 0.50249987vw;
    --vw-03: 0.310562vw;
    --vw-02: 0.19193787vw;
    --vw-01: 0.11862413vw; */


}


/* --100: 100.0;
    --62: 61.80339883;
    --38: 38.19660107;
    --24: 23.6067977;
    --14: 14.58980333;
    --9: 9.01699434;
    --5: 5.57280897;
    --3: 3.44418536;
    --2: 2.12862361;
    --1: 1.31556174;
    
    --08: 0.81306187;
    --05: 0.50249987;
    --03: 0.310562;
    --02: 0.19193787;
    --01: 0.11862413; */
/* TODO: що це? прибрати? */
.size-s {
  width: 100px;
}

.banner-greeting-for-home-page {
  width: 100%;
}

/* img {
    width: 100%;
} */

.progress-bar-container {
  width: 62vw;
}
/* Приховати скрол бар на мобільних пристроях */
@media (hover: none) {
  .cofans-bar {
    scrollbar-width: none;
    /* Приховує скрол бар у Firefox */
    -ms-overflow-style: none;
    /* Приховує скрол бар у Internet Explorer 10+ */
  }

  .cofans-bar::-webkit-scrollbar {
    display: none;
    /* Приховує скрол бар у Safari та Chrome */
  }
}

/* i dont know what do with it ^^^  */
/* /////////////////////////////////////////////////////// */

.user-card,
body {
  /* background-color: var(--color-accent-negative-lightest); */
  background-color: var(--color-neutral-lightest);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="password"],
textarea {
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-neutral-light);
}



.favorite-category-tags-container {
  display: flex;
  justify-content: center;
  gap: var(--size-l);
  /* background-color: blanchedalmond; */
}

/* =================================== */



/* =================================== */
/* ГОЛОВНА КАРТИНКА на сторінці ФАВОРИТА */
.favorite-image-main-container {
  display: flex;
  /* justify-content: center;
    align-items: center; */
  justify-self: center;
  align-self: center;
  width: fit-content;
  height: var(--size-7xl);
  margin-top: var(--size-2xl);
  background-color: var(--color-accent-negative-lightest);
  /* background-position: center; */
  /* background-size: cover; */
  /* background-color: #000000; */
  /* background-color: var(--color-accent-negative-lightest); */
  /* border-radius: var(--size-l); */
  /* overflow: hidden; */
}

.favorite-image-main {
  /* height: 100%; */
  border-radius: var(--size-l);
  object-fit: contain;
  /* max-width: 62vw; */
  /* max-width: 100%; */
  /* width: 100%; */
  /*backdrop-filter не працює якщо ширіна не задана */
  /* object-fit: contain; */
  /* width: fit-content; */

  /*  ці властивості застосовюються до іміджа але роблять фон у батьківському контейнері  */
  /* нажаль не працюють в сафарі */
  /* backdrop-filter: blur(4px) brightness(33%) saturate(220%); */
  /* backdrop-filter: contrast(40%); */
  /* backdrop-filter: grayscale(100%); */
  /* backdrop-filter: hue-rotate(120deg); */
  /* backdrop-filter: saturate(10%); */
  /* object-position: 50% 10%; */
  /* filter: drop-shadow(-10px 0 15px rgba(0, 0, 0, 0.7)) drop-shadow(10px 0 15px rgba(0, 0, 0, 0.7)); */
}

@media (orientation: landscape) {
  .favorite-image-main {
    height: 100%;
    max-width: 62vw;
  }
}

@media (orientation: portrait) {
  .favorite-image-main {
    width: 100%;
  }
}

/* =============================== */

.tag {
  display: flex;
  height: var(--size-3xl);
  width: fit-content;
  padding-left: var(--size-xl);
  padding-right: var(--size-xl);
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-neutral-light);
  border-radius: var(--size-m);
  /* font-weight: bold; */
  /* text-transform: uppercase; */
}

/* ********************************************* */
.icon-heart {
  /* width: var(--size-xl);
    height: var(--size-xl); */
  /* margin-right: var(--size-m); */
  /* fill: var(--color-favorite-medium); */
  /* fill: none; */
  /* stroke: var(--color-favorite-medium); */
  /* stroke: var(--color-favorite-lighter); */
  /* stroke-width: 2; */
  /* stroke-linejoin: round; */
}

svg[class*="icon-"] {
  /* розмір відносно тексту з яким застосовано іконку (залижить від висоти x) */
  width: var(--size-xl);
  height: var(--size-xl);
  margin-right: var(--size-s);
}

/* =========================================== */
.favorite-category-tags-container {
  width: fit-content;
}

/* ========================================== */

.current-user-edit-out-auth-links {
  /* background-color: var(--color-cofavorite-lighter); */
  height: var(--size-3xl);
  /* background-color: var(--color-neutral-darkest); */
  align-items: center;
  display: flex;
  gap: var(--size-xl);
}

.please_login {
  /* background-color: var(--color-cofavorite-lighter); */
  height: var(--size-xl);
  align-items: center;
  display: flex;
  gap: var(--size-xl);
}

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: var(--color-neutral-lighter); */
  height: var(--size-6xl);
}

/* ==================================================== */

.share-favorite-btn {
  /* background-color: white; */
  height: var(--size-3xl);
  padding-left: var(--size-xl);
  padding-right: var(--size-xl);
}



/* #recommendations_settings {
    display: flex;

} */

/* /////////////////////////////////////////// */

/* ===================== */

/* ===================== */

.tags-section {
  flex-wrap: wrap;
}

/* TODO: прибрати кругом в іконках марджин райт - бо додано для всіх іконок одразу */

/* === */

.user-profile-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  width: 100%;
}

/* ======= */
.tastes-overlap-container {
  margin-top: var(--size-3xl);
  /* width: 100%; */
  /* background-color: rgb(131, 216, 151); */
}

/* .curent_user_circle {
  background-color: var(--color-favorite-medium);
} */

/* other_user_circle */

/* ======== */

.user-profile-avatar-container {
  display: flex;
  width: fit-content;
  /* justify-self: center; */
  align-self: center;
  margin-top: var(--size-3xl);
  border-radius: var(--size-2xl);
  overflow: hidden;
  background-color: var(--color-accent-negative-lighter);
}

.favorite-gallery {
  column-count: 4;
  /* Встановлює кількість стовпців */
  /* column-gap: var(--size-l); */
  padding-left: var(--size-l);
  padding-right: var(--size-l);
  /* Відступи між стовпцями */
}

@media (max-width: 600px) {
  .favorite-gallery {
    column-count: 2;
    /* Один стовпець на вузьких екранах */
  }
}

.favorite-gallery img {
  margin-bottom: var(--size-l);
  width: 100%;
  /* Відступ між фото по вертикалі */
}

/* .tag-cofavorites-count {
  color: var(--color-cofavorite-dark);
} */

/* === */
em {
  color: var(--color-favorite-dark);
  font-weight: bold;
}

i {
  color: var(--color-cofavorite-dark);
  font-weight: bold;
}

.tastes-overlap-label {
  margin-top: var(--size-xl);
  /* display: flex; */
  /* flex-direction: column; */
}

/* ========== */

/* ========== */

hr {
  width: 100%;
  border: none;
  height: var(--size-4xs);
  background-color: var(--color-neutral-lighter);
}




/* стиль для .turbo-progress-bar записано прямо в html - перенести у стилі */
/* .turbo-progress-bar {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  background: #0076ff;
  z-index: 2147483647;
  transition:
    width 300ms ease-out,
    opacity 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
} */

/* блок coming-soon для розділів в розробці  */
/* копрка buymeacoffee */
.coming-soon a {
  margin-top: var(--size-2xl);
}




.category-about {
  width: 62vw;
  text-align: center;
  margin-top: var(--size-2xl);
  color: var(--color-neutral-light);
}

.banner-greeting-for-home-page {
  background: var(--gradient-horizontal-1-medium);
  border-top: var(--color-cofavorite-light) 1px solid;
}

/* ПЕРНШИЙ РЕЛІЗ FAVOTECA - v0.0.1 - 29.03.2025 */
/* це тестова палітра для перегляду кольорів - виводиться на тестових сторінках і не задіяна в релізі */

/* /////////////// */
.blue-lightest,
.blue-lighter,
.blue-light,
.blue-medium,
.blue-dark,
.blue-darker,
.blue-darkest,
.yellow-lightest,
.yellow-lighter,
.yellow-light,
.yellow-medium,
.yellow-dark,
.yellow-darker,
.yellow-darkest,
.red-lightest,
.red-lighter,
.red-light,
.red-medium,
.red-dark,
.red-darker,
.red-darkest,
.green-lightest,
.green-lighter,
.green-light,
.green-medium,
.green-dark,
.green-darker,
.green-darkest,
.purple-lightest,
.purple-lighter,
.purple-light,
.purple-medium,
.purple-dark,
.purple-darker,
.purple-darkest {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 200px;
  margin-top: 5px;
}

.blue-lightest {
  background-color: var(--blue-lightest);
}

.blue-lighter {
  background-color: var(--blue-lighter);
}

.blue-light {
  background-color: var(--blue-light);
}

.blue-medium {
  background-color: var(--blue-medium);
}

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

.blue-darker {
  background-color: var(--blue-darker);
}

.blue-darkest {
  background-color: var(--blue-darkest);
}

/* === */

.yellow-lightest {
  background-color: var(--yellow-lightest);
}

.yellow-lighter {
  background-color: var(--yellow-lighter);
}

.yellow-light {
  background-color: var(--yellow-light);
}

.yellow-medium {
  background-color: var(--yellow-medium);
}

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

.yellow-darker {
  background-color: var(--yellow-darker);
}

.yellow-darkest {
  background-color: var(--yellow-darkest);
}

/* === */

.red-lightest {
  background-color: var(--red-lightest);
}

.red-lighter {
  background-color: var(--red-lighter);
}

.red-light {
  background-color: var(--red-light);
}

.red-medium {
  background-color: var(--red-medium);
}

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

.red-darker {
  background-color: var(--red-darker);
}

.red-darkest {
  background-color: var(--red-darkest);
}

/* === */

.green-lightest {
  background-color: var(--green-lightest);
}

.green-lighter {
  background-color: var(--green-lighter);
}

.green-light {
  background-color: var(--green-light);
}

.green-medium {
  background-color: var(--green-medium);
}

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

.green-darker {
  background-color: var(--green-darker);
}

.green-darkest {
  background-color: var(--green-darkest);
}

/* === */

.purple-lightest {
  background-color: var(--purple-lightest);
}

.purple-lighter {
  background-color: var(--purple-lighter);
}

.purple-light {
  background-color: var(--purple-light);
}

.purple-medium {
  background-color: var(--purple-medium);
}

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

.purple-darker {
  background-color: var(--purple-darker);
}

.purple-darkest {
  background-color: var(--purple-darkest);
}
/* === */

.favorite-cofans-section,
.favorite-fans-section {
  flex-wrap: wrap;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 
 */