/* 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: #928174; /* Nie zmieniać nazwy globalnej, używany w silniku! */
    --secondary: #bd8960; /* Nie zmieniać nazwy globalnej, używany w silniku! */
    --blacktxt: #0f0e0d; /* Nie zmieniać nazwy globalnej, używany w silniku! */
    --whitetxt: #eee8e8; /* Nie zmieniać nazwy globalnej, używany w silniku! */

    --background: #191919;
    --txt-gold: #e0af29;
    --txt-lgold: #dfbeac;
    --txt-normal: #a39c93;
    --txt-light: #eee8e8;
    --txt-grey: #cac5c4;
    --txt-brown: #928174;
    --txt-dbrown: #1d1915;
    --txt-lbrown: #bd8960;
    --txt-blue: #bad3e9;
    --txt-black: #0f0e0d;
    --txt-dark: #151413;
}


/* FONTy */
body {
    font-family: "Lato", sans-serif;
    background-color: var(--background);
    min-height: 100vh;
    font-size: 0.70rem;
    line-height: 0.9rem;
    font-weight: 400;
    margin:0px;
    color: var(--txt-normal);
    font-style: normal;  
}

/* Klasa nadająca I AM FELL ENGLISH font na życzenie */
.medieval-font{
    font-family: "IM Fell English", serif;
}

/* SUWAKI */

/* 1) Hint dla Safari (ciemne natywne kontrolki + scrollbary overlay) */
:root { color-scheme: dark; }

/* 2) Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #423c3a #181717; /* thumb | track */
}

/* 3) WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: #181717;
}
::-webkit-scrollbar-thumb {
  background-color: #423c3a;
  border-radius: 4px;

  /* Safari overlay: „ramka” udająca tor, bez zwężania kciuka */
  box-shadow: inset 0 0 0 1px #181717;
}
::-webkit-scrollbar-corner {
  background-color: #181717;
}



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////  WYGLĄDY ELEMENTÓW  //////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* MAXWIDTH - klasa, która ogranicza naturalną maksymalną szerokość elementów do najszerszego viewportu */
.maxwidth{
    max-width: 1920px;
}





/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////  GLOBALNE FONTY  /////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////// */

h1 {
    font-family: "IM Fell English", serif;
    font-size: 1.2rem;
    line-height: 1.35rem;
    font-weight: 400;
    margin: 0px;
    color: var(--txt-gold);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;
}

h2{
    font-family: "IM Fell English", serif;
    font-size: 1.1rem;
    line-height: 1.2rem;
    font-weight: 400;
    margin: 0px;
    color: var(--txt-lgold);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;
}

h3{
    font-family: "IM Fell English", serif;
    font-size: 1.05rem;
    line-height: 1.15rem;
    font-weight: 400;
    margin: 0px;
    color: var(--txt-grey);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;
}

h4{
    font-family: "IM Fell English", serif;
    font-size: 0.8rem;
    line-height: 0.9rem;
    font-weight: 400;
    margin: 0px;
    color: var(--txt-grey);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;
}

.announcement{
    font-family: "IM Fell English", serif;
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: 400;
    margin: 0px;
    color: var(--txt-lbrown);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;    
}

.p-light{
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    line-height: 0.9rem;
    font-weight: 400;
    margin:0px;
    color: var(--txt-light);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;
}

.p-small{
    font-family: "Lato", sans-serif;
    font-size: 0.6rem;
    line-height: 0.7rem;
    font-weight: 400;
    margin:0px;
    color: var(--txt-normal);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;
}

.subtitle{
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    line-height: 0.9rem;
    font-weight: 400;
    margin:0px;
    color: var(--txt-lbrown);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;
}

p{
    font-family: "Lato", sans-serif;
    font-size: 0.70rem;
    line-height: 0.9rem;
    font-weight: 400;
    margin:0px;
    color: var(--txt-normal);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;    
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////  OKNA I GRAFICZNE ELEMENTY  /////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.window-simple {
  border-width: 12px; /* szerokość ramek – taka jak rogi */
  border-style: solid; /* wymagane, żeby border-image działał */
  border-image-source: url("../../assets/simple-window.jpg");
  border-image-slice: 12; /* przycięcie 12px z każdej strony */
  border-image-repeat: stretch; /* rogi zostają, boki się rozciągają */
  background-color: #31302f;
}

:root{
  --border: 10px;    /* grubość ramki (border-image) */
  --corner: 67px;    /* rozmiar PNG rogu */
  --overlap: 0px;    /* ewentualne dosunięcie rogów do środka (+) lub na zewnątrz (-) */
}

.window-full{
  position: relative;
  border: var(--border) solid transparent;
  border-image-source: url("../../assets/full-window.png");
  border-image-slice: 12;
  border-image-repeat: stretch;
  background-color: var(--txt-dbrown);

  padding: 1rem;

  /* żeby rogi się nie spotykały */
  min-width:  160px;
  min-height: 160px;
}

/* Pseudo-elementy rozszerzamy na obszar border-box (wychodzimy o border na zewnątrz) */
.window-full::before,
.window-full::after{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--border));   /* obejmij też grubość ramki */
  pointer-events: none;

  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--corner) var(--corner),
    var(--corner) var(--corner);
}

/* GÓRNE rogi */
.window-full::before{
  background-image:
    url("../../assets/window-corner-tl.png"),
    url("../../assets/window-corner-tr.png");
  background-position:
    left  calc(var(--overlap))  top    calc(var(--overlap)),
    right calc(var(--overlap))  top    calc(var(--overlap));
}

/* DOLNE rogi */
.window-full::after{
  background-image:
    url("../../assets/window-corner-bl.png"),
    url("../../assets/window-corner-br.png");
  background-position:
    left  calc(var(--overlap))  bottom calc(var(--overlap)),
    right calc(var(--overlap))  bottom calc(var(--overlap));
}


.window-full-title {
    display: inline-block;
    padding: 8px 15px; /* żeby tekst miał margines */
    padding-bottom: 5px;
    border-image-source: url("../../assets/window-full-title.png");
    border-style: solid;            /* MUSI być solid */
    border-width: 10px 22px;        /* góra/dół 10px, lewo/prawo 22px – STARTOWE wartości */
    border-image-slice: 10 22 10 22 fill;
    border-image-repeat: stretch;   /* lub repeat, jeśli środek ma się powtarzać */
    box-sizing: border-box;
    background: none;
    width: calc(100% + 40px);
    margin-top: -20px;
    margin-left: -20px;
    margin-bottom:20px;
}

.button-close{
    width: 34px;
    height: 34px;
    position: absolute;
    top:0px;
    right:0px;
    margin-top:-8px;
    margin-right:-8px;
    background: none;
    background-image: url("../../assets/close_n.png");
}

.button-close:hover{
    background-image: url("../../assets/close_h.png");
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////  FORMULARZE  /////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////// */


.button {
  display: inline-block;
  padding: 5px 15px; /* żeby tekst miał margines */
  border-image-source: url("../../assets/normal_button_n.png");
  border-style: solid;            /* MUSI być solid */
  border-width: 10px 22px;        /* góra/dół 10px, lewo/prawo 22px – STARTOWE wartości */
  border-image-slice: 10 22 10 22 fill;
  border-image-repeat: stretch;   /* lub repeat, jeśli środek ma się powtarzać */
  box-sizing: border-box;
  background: none;
}

.button:hover {
  border-image-source: url("../../assets/normal_button_h.png");
}

.button-disabled {
  display: inline-block;
  padding: 5px 15px; /* żeby tekst miał margines */
  border-image-source: url("../../assets/normal_button_d.png");
  border-style: solid;            /* MUSI być solid */
  border-width: 10px 22px;        /* góra/dół 10px, lewo/prawo 22px – STARTOWE wartości */
  border-image-slice: 10 22 10 22 fill;
  border-image-repeat: stretch;   /* lub repeat, jeśli środek ma się powtarzać */
  box-sizing: border-box;
  background: none;
}



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

/* POLA INPUT */
input::placeholder {
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    line-height: 0.9rem;
    font-weight: 400;
    margin:0px;
    color: var(--txt-normal);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;  
    
}

input{
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    line-height: 0.9rem;
    font-weight: 400;
    border-radius: 0px;
    background-color: var(--txt-dark);
    border: 1px solid var(--txt-normal);
    box-shadow: inset 0 0 7px rgba(0,0,0,1);
    color: var(--txt-light);
}

/* KOMUNIKAT BŁĘDU W POLU */
.validation-message-error{
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    line-height: 0.9rem;
    font-weight: 400;
    margin:0px;
    color: var(--txt-gold);
    font-style: normal;

    text-shadow: 
        -1px -1px 0 #0f0e0db3,
         1px -1px 0 #0f0e0db3,
        -1px  1px 0 #0f0e0db3,
         1px  1px 0 #0f0e0db3;  
}

/* KOMUNIKAT BŁĘDU FORMULARZA W PRZYPADKU FORMULARZY AJAX */
.submit-error{
    width:100%;
    border-width: 12px; /* szerokość ramek – taka jak rogi */
    border-style: solid; /* wymagane, żeby border-image działał */
    border-image-source: url("../../assets/simple-window.jpg");
    border-image-slice: 12; /* przycięcie 12px z każdej strony */
    border-image-repeat: stretch; /* rogi zostają, boki się rozciągają */
    background-color: #31302f!important;
    border-width: 12px; /* szerokość ramek – taka jak rogi */
    border-style: solid; /* wymagane, żeby border-image działał */
    border-image-source: url("../../assets/simple-window.jpg");
    border-image-slice: 12; /* przycięcie 12px z każdej strony */
    border-image-repeat: stretch; /* rogi zostają, boki się rozciągają */
    background-color: #31302f!important;
    color: var(--txt-gold);
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;  
}

/* CHECKBOX CUSTOM */

/* Ukrywamy natywny checkbox */
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Pudełko z grafiką odznaczonego */
.checkbox-box {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../../assets/checkbox.png");
  background-size: cover;
  cursor: pointer;
  margin-right: 8px;
  vertical-align: middle;
}

/* Zmieniona grafika gdy zaznaczony */
.checkbox input[type="checkbox"]:checked + .checkbox-box {
  background-image: url("../../assets/checkbox_checked.png");
}

/* Tekst obok */
.checkbox-text {
  font-family: "Lato", sans-serif;
  font-size: 0.7rem;
  line-height: 0.9rem;
  font-weight: 400;
  margin: 0;
  color: var(--txt-normal);
  font-style: normal;

  text-shadow: 
    -1px -1px 0 #0f0e0db3,
     1px -1px 0 #0f0e0db3,
    -1px  1px 0 #0f0e0db3,
     1px  1px 0 #0f0e0db3;
}

/* CUSTOM RADIO */

/* Ukrywamy natywny radio */
.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Ikona radia niezaznaczonego */
.radio-box {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../../assets/radio.png");
  background-size: cover;
  cursor: pointer;
  margin-right: 8px;
  vertical-align: middle;
}

/* Ikona gdy radio zaznaczone */
.radio input[type="radio"]:checked + .radio-box {
  background-image: url("../../assets/radio_selected.png");
}

/* Tekst przy radiu */
.radio-text {
  font-family: "Lato", sans-serif;
  font-size: 0.7rem;
  line-height: 0.9rem;
  font-weight: 400;
  margin: 0;
  color: var(--txt-normal);
  font-style: normal;

  text-shadow: 
    -1px -1px 0 #0f0e0db3,
     1px -1px 0 #0f0e0db3,
    -1px  1px 0 #0f0e0db3,
     1px  1px 0 #0f0e0db3;
}


/* DROPDOWN */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background: var(--txt-dark);
  color: var(--txt-light);
  border: 1px solid var(--txt-normal);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: var(--txt-dark);
  border: 1px solid var(--txt-normal);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 10;
}

.dropdown-menu li {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: var(--txt-normal);
}

.dropdown-menu.open {
  display: block;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////  KURSORY  /////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////// */

* {
  cursor: url("../../modules/cursors/normal.png") 2 2, default !important;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////  ALERTY  /////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.success-message, .error-message{
  border-width: 12px; /* szerokość ramek – taka jak rogi */
  border-style: solid; /* wymagane, żeby border-image działał */
  border-image-source: url("../../assets/simple-window.jpg");
  border-image-slice: 12; /* przycięcie 12px z każdej strony */
  border-image-repeat: stretch; /* rogi zostają, boki się rozciągają */
  background-color: #31302f!important;
}