/* Reset i baza */
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-width: 320px;
    font-size: 1.3rem; /* 13px */
    line-height: 1.42857;
    color: #777;
    background-color: #F5F5F3;
    padding: 20px;
}

/* Nagłówki */
h2 {
    font-size: 2.0rem;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Formularz */
form {
    background: #fff;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #ddd;
}

/* Gwiazdki */
.stars {
    direction: rtl;
    unicode-bidi: bidi-override;
    font-size: 4rem;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.stars input {
    display: none;
}
.stars label {
    color: #ccc;
    cursor: pointer;
    margin: 0 5px;
    transition: color 0.2s;
}
.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label {
    color: #ffca08;
}

/* Tekstarea */
textarea {
    width: 100%;
    padding: 10px;
    font-size: 1.3rem;
    border: 1px solid #ccc;
    resize: vertical;
    margin-top: 10px;
}

/* Przycisk */
button,
.btn {
    background: #e5e5e5;
    border: 1px solid #bbb;
    color: #333;
    padding: 10px 16px;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
button:hover,
.btn:hover {
    background: #d5d5d5;
}

/* Powrót */
.back-button {
    text-align: center;
    margin-top: 25px;
}

/* Kontener */
.form-container {
    max-width: 600px;
    margin: 0 auto;
}