/* Dodatek do index.css – tylko formularze i komunikaty wewnątrz .content.
   Nie zmienia układu strony. Kolory i ramki jak w index.css. */

.content h4{
margin: 1rem 0 0.4rem 0;
font-size: 16px;
text-transform: uppercase;
border-bottom: 1px solid #57adc0;
}
.content h4:first-child{ margin-top: 0; }
.content p + p{ margin-top: 0.6rem; }
.content ul{ margin: 0.5rem 0 0.5rem 1.5rem; }

.form{
display: flex;
flex-direction: column;
gap: 0.7rem;
max-width: 520px;
}
.form label{
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 14px;
}
.form label small{ color: #555; }
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form input[type="url"],
.form textarea{
font: inherit;
padding: 0.4rem 0.5rem;
border: 1px solid #57adc0;
background: #fff;
color: #111;
}
.form textarea{ min-height: 110px; resize: vertical; }
.form input:focus,
.form textarea:focus{ outline: 2px solid #97D9E9; }
.form .check{
flex-direction: row;
align-items: flex-start;
gap: 0.5rem;
}
.row{ display: flex; gap: 0.7rem; flex-wrap: wrap; }
.row > label{ flex: 1 1 200px; }

.btn{
font: inherit;
text-transform: uppercase;
font-size: 14px;
background: #000;
color: #fff;
border: 3px ridge #57adc0;
padding: 0.4rem 1rem;
cursor: pointer;
align-self: flex-start;
}
.btn:hover{ color: #97D9E9; text-shadow: 0 0 5px #fff; }
.btn:disabled{ opacity: 0.5; cursor: default; }
.btn.link{
background: none;
border: none;
color: #1d7a93;
padding: 0;
text-transform: none;
text-decoration: underline;
}

.msg{
padding: 0.5rem 0.7rem;
margin-bottom: 0.7rem;
border: 1px solid #57adc0;
background: #eef9fc;
font-size: 14px;
}
.msg.err{ border-color: #b33; background: #fbeaea; }
.msg.ok{ border-color: #3a8a4a; background: #eaf6ec; }
.hidden{ display: none !important; }

.portrait{
float: right;
margin: 0 0 10px 10px;
max-width: 230px;
border: 1px solid #97D9E9;
}
.facts{ display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; font-size: 14px; }
.facts dt{ font-weight: bold; }