/* TEN PLIK SŁUŻY SKONFIGUROWANIU: 
/* 1. KLAS WŁASNYCH - utwórz dowolne klasy stylizujące Twoj projekt.
/* 2. NAPISANIA SILNIKA - utwórz dowolne wpisy css, które zmodyfikują domyślne wyglądy silnika - plik user_css.css ładowany jest jako drugi, więc nadpisać możesz wszystko, od formularzy przez inputy, rozmiary nagłówków.
/* 3. KOLORÓW GLOBALNYCH - możesz utworzyć własne kolory, ale co ważniejsze - aplikacja korzysta już z kilku domyślnych kolorów globalnych, które możesz zmienić na własne.
*/


/* KOLORY GLOBALNE */
:root {
    --primary: #958169;
    --secondary: #571377;
    --blacktxt: #000000;
    --whitetxt: #ffffff;
    --background: #f1f1f1;
    --borders: #dee1e3;
    --gradient: linear-gradient(to right, #b0997e, #cfc3b0);
    --gradient_top_down: linear-gradient(to bottom, #b0997e, #cfc3b0);
    --status-green: #10b808;
    --status-red: #ff000b;
    --status-brown-light: #e4a355;

    /* Karuzela obrazów */
    --gray-light: #dddddb; /* nie modyfikować nazwy */
    --accent: #958169; /* nie modyfikować nazwy */
    --white: #ffffff; /* nie modyfikować nazwy */
}


/* FONTy */
body {
    font-family: Manrope;
    background-color: var(--background);
}

.max_view{
    max-width: 1280px;
}

.p-light{
    font-size: 0.875rem;
    font-weight: 300;
    margin:0px;
    opacity: 0.7;
}

.p-50{
    font-size: 0.875rem;
    font-weight: 400;
    margin:0px;
    opacity: 0.5;
}

.p-20{
    font-size: 0.875rem;
    font-weight: 400;
    margin:0px;
    opacity: 0.2;
}

.medium{
    font-weight: 500;
}

.opa7{
    opacity: 0.7;
}

.opa5{
    opacity: 0.5;
}

.opa2{
    opacity: 0.2;
}

.p-docs{
    font-size: 0.5rem;
    line-height: 0.625rem;
    font-weight: 400;
    margin:0px;
}


/* BACKGROUND */
@media only screen and (max-width: 1299px){
    .splash_background_login {
        background-image: url('/assets/img/background.png'); 
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat;
    }
}
@media only screen and (min-width: 1300px){
    .splash_background_login {
        background: var(--gradient);
    }
}

@media only screen and (max-width: 1299px){
    .splash_background_img {
        background: none;
    }
}
@media only screen and (min-width: 1300px){
    .splash_background_img {
        background-image: url('/assets/img/background.png'); 
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat;
    }
}

.img_square{
    aspect-ratio: 1/1;
}
.img_contain{
    object-fit: contain;
}
.img_cover{
    object-fit: cover;
}
.img_radius_10{
    border-radius: 10px;
}


/* KOLORY TEKSTU jako class */
.white {
    color:var(--whitetxt);
}
.black {
    color:var(--blacktxt);
}


/* BUTTONy */
button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:0.5rem;
    font-size: 1rem;
    border-radius: 10px;
    margin: 0px;
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1rem;
}

button.big {
    border-radius: 10px;
    font-size: 1.25rem;
    margin:0.1rem;
    width:100%;
    padding: 0.625rem;
}

.big {
    border-radius: 10px;
    font-size: 1.25rem;
    margin:0.1rem;
    width:100%;
    padding: 0.5rem;
}

button.gradient {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    text-align: left;
    color: var(--blacktxt);
    background: var(--gradient);
}

.gradient {
    text-align: left;
    color: var(--blacktxt);
    background: var(--gradient);
}

button.mt {
    margin-top:0.575rem;
}

button:disabled,
input[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}


/* FLAGI */
.flag {
    border-radius: 10px;
    border: 2px solid var(--borders);
    width:100%;
    max-width:80px;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* POLA INPUT */
input::placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.2;
}

/* CHECKBOX */
/* Styluj label z checkboxem */
label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
    margin-top: 0.625rem;
}

.p-label{
    font-size: 0.625rem;
    font-weight: 400;
    margin:0px;
    line-height: 0.6875rem;
}

/* Ukryj natywny checkbox */
input[type="checkbox"] {
    /*display: none;*/
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    outline: none;
}

/* Styluj element zastępczy (checkmark) */
input[type="checkbox"] + .checkmark {
    height: 20px;
    width: 20px;
    border: 1px solid var(--borders); /* <- Twój własny styl */
    display: inline-block;
    margin-right: 8px;
    border-radius: 4px;
    position: relative;
}

/* Zaznaczenie (ptaszek) */
input[type="checkbox"]:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


.navbar_bottom{
    background: var(--gradient_top_down);
    height: 5rem;
    display:flex;
    width:100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 90;
    position: fixed;
    bottom: 0px;
    padding: 0rem 1.25rem 0rem 1.25rem; /* class=p20 */
    -webkit-box-shadow: 0rem 0rem 2rem 0rem rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0rem 0rem 2rem 0rem rgba(0, 0, 0, 0.13);
    box-shadow: 0rem 0rem 2rem 0rem rgba(0, 0, 0, 0.13);
}

.navbar_top{
    background: var(--gradient_top_down);
    height: 4rem;
    display:flex;
    width:100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 90;
    position: fixed;
    top: 0px;
    padding: 0rem 1.25rem 0rem 1.25rem; /* class=p20 */
    -webkit-box-shadow: 2rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 2rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13);
    box-shadow: 2rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13);
}

.navbar-element-active{
    max-width: 2.5rem;
    width:90%;
    height: auto;
    object-fit: contain;
    /*filter: invert(55%) sepia(28%) saturate(324%) hue-rotate(353deg) brightness(89%) contrast(91%);*/ /* brąz */
    filter: invert(100%) sepia(3%) saturate(10%) hue-rotate(56deg) brightness(102%) contrast(101%);
}
.navbar-element-inactive{
    max-width: 2.5rem;
    width:90%;
    height: auto;
    object-fit: contain;
    filter: invert(100%) sepia(3%) saturate(10%) hue-rotate(56deg) brightness(102%) contrast(101%);
}

/* licznik wiadomości w konwersacjach */
.licznik-left{
    width:1.125rem; 
    min-height:1.125rem;
    aspect-ratio: 1/1;
    margin-top: -1.5rem;
    margin-left: 1.5rem;
    background-color:red; 
    color:white; 
    font-size:0.625rem; 
    font-weight: 500; 
    border-radius:500px; 
    position:absolute; 
    padding:2px; 
    justify-content:center; 
    align-items:center;
    text-align: center;
}
.licznik-right{
    width:1.125rem; 
    min-height:1.125rem;
    aspect-ratio: 1/1;
    margin-top: -2rem;
    margin-right: -0.25rem;
    background-color:red; 
    color:white; 
    font-size:0.625rem; 
    font-weight: 500; 
    border-radius:500px; 
    position:absolute; 
    padding:2px; 
    justify-content:center; 
    align-items:center;
    text-align: center;
}
.licznik-menu{
    width:1.125rem; 
    min-height:1.125rem;
    aspect-ratio: 1/1;
    margin-top: -1.5rem;
    margin-left: 1.125rem;
    background-color:red; 
    color:white; 
    font-size:0.625rem; 
    font-weight: 500; 
    border-radius:500px; 
    position:absolute; 
    padding:2px; 
    justify-content:center; 
    align-items:center;
    text-align: center;
}

.licznik_ogolny{
    width:1.125rem; 
    min-height:1.125rem;
    aspect-ratio: 1/1;
    background-color:red; 
    color:white; 
    font-size:0.625rem; 
    font-weight: 500; 
    border-radius:500px; 
    padding:2px; 
    justify-content:center; 
    align-items:center;
    text-align: center;
}

/* Biały filtr do svg */
.logo-biale{
    filter: invert(100%) sepia(3%) saturate(10%) hue-rotate(56deg) brightness(102%) contrast(101%);
}
/* Brązowy filtr do svg */
.logo-brazowe{
    filter: invert(55%) sepia(28%) saturate(324%) hue-rotate(353deg) brightness(89%) contrast(91%);
}
/* Czerwony filtr do svg */
.logo-czerwone{
    filter: invert(14%) sepia(99%) saturate(6994%) hue-rotate(0deg) brightness(104%) contrast(113%);
}
/* Zielony filtr do svg */
.logo-zielone{
    filter: invert(52%) sepia(80%) saturate(455%) hue-rotate(92deg) brightness(89%) contrast(95%);
}

.logo_menu{
    width: 2rem;
}


/* TABSY / BOXY */
.first{
    padding-bottom:7rem;
}

.company_background {
    height:10rem; 
    background-size:cover; 
    background-position:top; 
    background-repeat:no-repeat;
}
@media only screen and (max-width: 767px){
    .company_background {
        height:10rem; 
        background-size:cover; 
        background-position:top; 
        background-repeat:no-repeat;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1299px){
    .company_background {
        height:15rem; 
        background-size:cover; 
        background-position:top; 
        background-repeat:no-repeat;
    }
}
@media only screen and (min-width: 1300px){
    .company_background {
        height:20rem; 
        background-size:cover; 
        background-position:top; 
        background-repeat:no-repeat;
    }
}

.box {
    padding: 10px;
    border-radius: 10px;
    border: 2px solid var(--borders);
    background-color: var(--white);
}

.tabs {
    border-radius: 10px;
    border: 2px solid var(--borders);
    background-color: var(--white);
    align-items: stretch;
}

.active_tab{
    border: 2px solid var(--white);
    background-color: var(--white);
    height: 2.25rem;
    cursor:pointer;
}

.dezactive_tab{
    border: 0px solid var(--borders);
    background-color: var(--borders);
    height: 2.25rem;
    cursor:pointer;
}
.tab_left {
    border-right: none;
}
.tab_right {
    border-left: none;
    
}

.separator {
    border-top: 1px solid var(--borders);
}

.w23{
    width: 23%;
}

.pointer {
    cursor:pointer;
}

.edit {
    width:1.125rem;
}
/*.edit_button{
    background-color:transparent;
    padding:0;
}
.edit_button:hover {
    background-color: transparent !important;
}
.edit_button:focus {
    background-color: transparent !important;
}*/
.edit_button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 0.825rem;
    gap: 0.5rem;
}

.text_left{
    text-align: left;
}
.text_center{
    text-align: center;
}
.text_right{
    text-align: right;
}


.column_one{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.column_two{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.column_three{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.column_four{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.column_five{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media only screen and (max-width: 767px){
    .m-column_one{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .m-column_two{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .m-column_three{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .m-column_four{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .m-column_five{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}

@media only screen and (min-width: 768px) and (max-width: 1299px){
    .t-column_one{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .t-column_two{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .t-column_three{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .t-column_four{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .t-column_five{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}

@media only screen and (min-width: 1300px){
    .d-column_one{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .d-column_two{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .d-column_three{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .d-column_four{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .d-column_five{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}














/* DISPLAY - MUSI BYĆ NA SAMYM DOLE KODU */
.display_none {
    display: none;
}


@media only screen and (max-width: 767px){
    .m-display_none {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1299px){
    .t-display_none {
        display: none;
    }
}

@media only screen and (min-width: 1300px){
    .d-display_none {
        display: none;
    }
}

/* ANIMCAJCE przerobione przez ChatGPT na podstawnie https://codepen.io/jeryj/pen/LzPjdJ */

/* Wiggle */
/* Element, który będzie się ruszał */
.wiggle-element {
    display: flex;
}

/* Klasa aktywująca animację */
.wiggle-element.is-active {
    animation: 1.7s wiggle ease infinite;
}

/* Definicja animacji wiggle */
@keyframes wiggle {
    0% {
        transform: rotate(-3deg);
    }
    20% {
        transform: rotate(20deg);
    }
    40% {
        transform: rotate(-15deg);
    }
    60% {
        transform: rotate(5deg);
    }
    90% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0);
    }
}


/* Pulse */
/* Element, który będzie się ruszał */
.pulse-element {
    display: flex;
}

/* Klasa aktywująca animację */
.pulse-element.is-active {
    /* animation: 1.7s wiggle ease infinite; */
    animation: pulse 0.4s ease infinite alternate;
}

/* Definicja animacji pulse */
@keyframes pulse {
    0% {
        transform: scale(0.75);
    }
    100% {
        transform: scale(1);
    }
}
/* KONIEC ANIMACJI */


/* POPUP */
/* Nakładka (ciemne tło za popupem) */
#overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Sam popup */
#popup {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    max-width: 1280px;
    width: 80%;
    /*max-height: 80vh;*/
    height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
}

/* Responsywny odstęp na mniejszych ekranach */
@media (max-width: 1400px) {
    #popup {
        width: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0; /* usuwamy margines */
    }
}

/* Przycisk zamykania */
#popup .close-btn {
    /* position: absolute;
    top: 10px;
    right: 15px; */
    font-size: 2rem;
    line-height: 1rem;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

/* Panel podglądu dokumentów */
.preview-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
} 
/* Dokument */
.preview {
    width: 1400px;
    /* aspect-ratio: 1 / 1.414; */
    background: white;
    transform-origin: top left;
    /* box-shadow: 0 0 10px rgba(0,0,0,.2); */
    /* padding: 3rem; */
    /* margin:2px; */
}

/* Tu działa wizualnie, ale bez skalowania wewnątrz -> wersja 1.1 */
/* .preview-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.preview {
    width: 100%;
    max-width: 1500px;
    aspect-ratio: 1 / 1.414;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    padding: 3rem;
} */

table, tr, img {
    break-inside: avoid;
    page-break-inside: avoid;
}

.break_words{
    /* overflow-wrap: break-word;  
    word-break: break-word; */
    hyphens: auto;
}

.uppercase {
    text-transform: uppercase;
}

.field_required{
    color: red;
}
/* <span class="field_required">*</span> */

.box-payment-info {
    background-color: var(--background);
    color: #bababa;
    border-radius: 500px;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.ajax-message {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    display: none;
}

.ajax-message-success {
    color: var(--status-green);
}

.ajax-message-error {
    color: var(--status-red);
}