@font-face {
	font-family: 'Roboto';
	src: url('Roboto-Regular.ttf') format('truetype');
	font-weight: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('Roboto-Bold.ttf') format('truetype');
	font-weight: bold;
}

body {
	font-family: 'Roboto';
	white-space: nowrap;
	max-width: 600px;
	margin: 0 auto;
	padding: 0px;
	background: #f5f5f5;
	height: 100vh;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	flex-wrap: nowrap;
}

a {
	color: #eb6864;
	text-decoration: none;
	transition: all .2s;
	margin-top: 2px;
	font-size: 16px;
}

.box {
	display: inline-block;
	padding: 20px 30px;
	box-sizing: border-box;
	background: white;
	border-radius: 12px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	font-family: Arial, sans-serif;
	font-size: 18px;
}

.box .pureText {
	padding: 20px 30px;
}

.links {
	margin-top: 40px;
}

.d-block {
	display: block;
}

.list-group {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	border-radius: 0.375rem;
	overflow: hidden;
}

.controls {
	display: flex;
	gap: 16px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.styled-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 11px 40px 11px 16px;
	font-size: 16px;
	font-family: inherit;
	color: #eb6864;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23eb6864' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
}

.readContent {
	white-space: normal;
	overflow-wrap: break-word;
}

#messParts {
	max-width: 600px;
}

.reading {
	background: white;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.reference {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 12px;
}

.refrain {
	font-weight: bold;
	color: #2c3e50;
	margin: 12px 0;
}

.verse {
	margin: 8px 0;
	line-height: 1.5;
}

.acclamation {
	font-style: italic;
}

pre {
	white-space: pre-wrap;
	font-family: inherit;
	margin: 0;
}

/* Złożone selektory */

a:hover,
a:focus {
	color: #d7504c;
	text-decoration: underline;
}

a svg {
	stroke: #eb6864;
	width: 18px;
}

a:hover svg,
a:focus svg {
	stroke: #d7504c;
}

.footer {
	color: #00000069;
	margin-bottom: 1rem;
}

.footer a{
	color: #00000069;
	text-decoration: none;
}

.footer a:hover{
	color: #000000ff;
	text-decoration: none;
}

.list-group li {
	list-style: none;
	padding: 12px 16px;
	border: 1px solid #dee2e6;
	border-bottom: none;
	background: #fff;
	color: #eb6864;
	transition: background 0.2s ease;
}

.list-group li:last-child {
	border-bottom: 1px solid #dee2e6;
}

.list-group li:hover {
	background: #f8f9fa;
	color: #c0392b;
	cursor: pointer;
}

.list-group li.active {
	background: #eb6864;
	color: white;
	border-color: #ffc3c1;
	font-size: 16px;
}

.list-group li a {
	color: inherit;
	text-decoration: none;
	display: block;
}

.control-group label {
	display: block;
	margin-top: 1.2rem;
	font-size: 14px;
	color: #555;
	font-weight: 500;
}

.styled-select:hover {
	background-color: #f8f9fa;
	color: #c0392b;
	border-color: #c0392b;
}

.styled-select:focus {
	outline: none;
	border-color: #eb6864;
	box-shadow: 0 0 0 3px rgba(235, 104, 100, 0.2);
}

.styled-select:active {
	background-color: #fff5f5;
}

.styled-select option {
	background: #fff;
	color: #333;
	padding: 10px;
}

.reading h2 {
	margin: 0 0 8px;
	color: #c0392b;
	font-size: 1.2rem;
}

/* Mobile */
@media (max-width: 600px) {
	.box {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
		margin-top: 20px;
	}

	.controls {
		flex-direction: column;
		gap: 12px;
	}

	.control-group {
		min-width: 100%;
	}
}

/* ========== ŚREDNIO JASNY (wyraźnie cieplejszy) ========== */
body.theme-medium {
	background: #ebe4df;
	color: #2b2623;
}

body.theme-medium .box {
	background: #f4efeb;
	box-shadow: 0 5px 18px rgba(80, 50, 40, 0.10);
}

body.theme-medium .list-group li {
	background: #f4efeb;
	border-color: #d6ccc4;
	color: #d45753;
}

body.theme-medium .list-group li:hover {
	background: #e9e0d9;
	color: #b53e3a;
}

body.theme-medium .list-group li.active {
	background: #d45753;
	color: #fff;
	border-color: #d45753;
}

body.theme-medium .styled-select {
	background-color: #f4efeb;
	border-color: #d6ccc4;
	color: #d45753;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d45753' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4z'/%3E%3C/svg%3E");
}

body.theme-medium .styled-select:hover {
	background-color: #e9e0d9;
	color: #b53e3a;
	border-color: #b53e3a;
}

body.theme-medium .styled-select:focus {
	border-color: #d45753;
	box-shadow: 0 0 0 3px rgba(212, 87, 83, 0.2);
}

body.theme-medium .styled-select:active {
	background-color: #efe7e1;
}

body.theme-medium .control-group label {
	color: #6b5e56;
}

body.theme-medium a {
	color: #d45753;
}

body.theme-medium a:hover,
body.theme-medium a:focus {
	color: #b53e3a;
}

body.theme-medium a svg {
	stroke: #d45753;
}

body.theme-medium a:hover svg,
body.theme-medium a:focus svg {
	stroke: #b53e3a;
}

body.theme-medium .footer {
	color: #00000069;
	margin-bottom: 1rem;
}

body.theme-medium .footer a{
	color: #00000069;
	text-decoration: none;
}

body.theme-medium .footer a:hover{
	color: #000000ff;
	text-decoration: none;
}


/* ========== CIEMNY ========== */
body.theme-dark {
	background: #1e1c1b;
	color: #e8e4e1;
}

body.theme-dark .box {
	background: #2a2726;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
	color: #e8e4e1;
}

body.theme-dark .list-group li {
	background: #2a2726;
	border-color: #3d3937;
	color: #f08a86;
}

body.theme-dark .list-group li:hover {
	background: #353130;
	color: #ff9f9b;
}

body.theme-dark .list-group li.active {
	background: #eb6864;
	color: #fff;
	border-color: #eb6864;
}

body.theme-dark .styled-select {
	background-color: #2a2726;
	border-color: #3d3937;
	color: #f08a86;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f08a86' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4z'/%3E%3C/svg%3E");
}

body.theme-dark .styled-select:hover {
	background-color: #353130;
	color: #ff9f9b;
	border-color: #eb6864;
}

body.theme-dark .styled-select:focus {
	border-color: #eb6864;
	box-shadow: 0 0 0 3px rgba(235, 104, 100, 0.25);
}

body.theme-dark .styled-select:active {
	background-color: #312e2c;
}

body.theme-dark .control-group label {
	color: #a39e9a;
}

body.theme-dark a {
	color: #f08a86;
}

body.theme-dark a:hover,
body.theme-dark a:focus {
	color: #ff9f9b;
}

body.theme-dark a svg {
	stroke: #f08a86;
}

body.theme-dark a:hover svg,
body.theme-dark a:focus svg {
	stroke: #ff9f9b;
}

body.theme-dark .footer {
	color: #ffffff69;
	margin-bottom: 1rem;
}

body.theme-dark .footer a{
	color: #ffffff69;
	text-decoration: none;
}

body.theme-dark .footer a:hover{
	color: #ffffffff;
	text-decoration: none;
}