/* ===========================
   Fonts
=========================== */

@font-face {
    font-family: Inter;
    src: url("/app/view/assets/fonts/Inter-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url("/app/view/assets/fonts/Inter-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Anonymous;
    src: url("/app/view/assets/fonts/AnonymousPro-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Anonymous;
    src: url("/app/view/assets/fonts/AnonymousPro-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===========================
   Variables
=========================== */

:root {
    --font-main: "Inter", arial, sans-serif;
    --font-menu: "Anonymous", arial, sans-serif;
    --font-heading: "Anonymous", arial, sans-serif;
    --color-bg: #212121;
    --color-dark-bg: #161616;
    --color-text: #fff;
    --color-accent: #3AFF14;
    --color-border: #04BC35;
    --container-width: 1200px;
    --container-padding: 20px;
    --radius: 12px;
    --transition: 0.2s ease;
    --form-bg: #212121;
    --form-bg-focus: #242424;
    --form-text: var(--color-text);
    --form-placeholder: rgb(255 255 255 / 55%);
    --form-border: var(--color-border);
    --form-border-focus: var(--color-accent);
    --form-radius: var(--radius);
    --form-padding: 12px 14px;
    --form-error: #ff3b3b;
    --form-success: #39ff14;
    --form-shadow-focus: 0 0 0 4px rgb(57 255 20 / 18%);
    --form-shadow-error: 0 0 0 4px rgb(255 59 59 / 18%);
    --btn-bg: var(--color-accent);
    --btn-text: #111;
    --btn-bg-hover: #2de810;
}

/* ===========================
   Base
=========================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-main), sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

img {
    height: 100%;
    width: auto;
}

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

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading), sans-serif;
    color: var(--color-accent);
    font-weight: 700;
    margin: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--color-accent) 1px solid;
    background: var(--color-dark-bg);
    padding: 5px 20px;
}
header .logo {
    height: 50px;
    width: auto;
}
header .home-btn {
    font-size: 24px;
    color: var(--color-accent);
}
.container {
    padding: 5px;
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}
.heading {
    justify-content: center;
    border-bottom: var(--color-accent) 1px solid;
}
.heading h1 {
    color: var(--color-text);
}
.chat {
    padding: 5px;
    display: grid;
    grid-template-columns: 20px 1fr 80px 20px;
    border: 1px solid var(--color-dark-bg);
    border-radius: 10px;
}
.chat .full-name {
    text-align: center;

}
.text-warning {
    color: #ff4545;
}
.text-muted {
    color: #d0d0d0;
}

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

.chat-row {
    padding: 10px;
    border: var(--color-border) 1px solid;
    border-radius: 10px;
}

span {
    font-size: 13px;
}
.text-center {
    text-align: center;
}
.column {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    flex-direction: column;
}

span#products-btn {
    margin-bottom: 10px;
}
.product {
    width: 100%;
    border-bottom: var(--color-border) 1px solid;
    justify-content: center;
    align-items: center;
}
#products {

    border: var(--color-border) 1px solid;
    border-radius: 5px;

    max-height: 0;
    overflow-y: auto;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease;
    margin-bottom: 0;
    padding: 0;
}

#products.open {
    max-height: 500px; /* больше предполагаемой высоты */
    opacity: 1;
    padding: 10px;
    margin-bottom: 10px;
}
#products-btn i {
    transition: transform 0.25s ease;
}

#products.open + i,
#products-btn.active i {
    transform: rotate(180deg);
}
.product {
    padding-bottom: 5px;
}