/* ================================================================
   SERVICE PAGE — shared layout for all calculator service pages
   (books, flyers, vizitki, …)
   ================================================================ */

.service-page {
padding: 80px 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}

.service-page::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255,255,255,0.92) 0%,
rgba(255,255,255,0.55) 30%,
rgba(255,255,255,0.50) 70%
);
z-index: 1;
}

.service-page .container {
position: relative;
z-index: 2;
}

/* Per-service backgrounds — upload matching images to /wp-content/uploads/ */
.service-page--books   { background-image:url("/wp-content/uploads/2026/03/books-page-background.webp"); }
.service-page--flyers  { background-image:url("/wp-content/uploads/2026/03/flyers-page-background.webp"); }
.service-page--vizitki { background-image:url("/wp-content/uploads/2026/03/vizitki-page-background.webp"); }


/* ---- Layout ---- */

.books-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: start;
}

.books-content h1 {
font-size: 42px;
margin-bottom: 20px;
}

.books-content p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 18px;
color: #444;
}

.books-content ul {
margin-top: 20px;
padding-left: 20px;
}

.books-content li {
margin-bottom: 8px;
}


/* ---- Calculator sidebar ---- */

.books-calculator {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
position: sticky;
top: 120px;
}

.books-calculator h3 {
margin-bottom: 20px;
font-size: 22px;
}

.books-calculator label {
display: block;
margin-top: 15px;
font-size: 14px;
font-weight: 600;
}

.books-calculator input,
.books-calculator select {
width: 100%;
margin-top: 6px;
padding: 10px;
border-radius: 6px;
border: 1px solid #ddd;
font-size: 15px;
}

.books-calculator input:focus,
.books-calculator select:focus {
outline: none;
border-color: #ff3b3b;
}

.books-price {
margin-top: 25px;
background: #f7f7f7;
padding: 18px;
border-radius: 8px;
text-align: center;
}

.books-price p {
font-size: 14px;
}

.books-price h2 {
color: #ff3b3b;
font-size: 30px;
margin-top: 5px;
}

.books-order {
margin-top: 20px;
width: 100%;
}


/* TABLET */

@media(max-width: 1000px) {

.books-layout {
grid-template-columns: 1fr;
gap: 40px;
}

.books-calculator {
position: relative;
top: 0;
margin-top: 30px;
}

.books-content h1 {
font-size: 34px;
}

}


/* MOBILE */

@media(max-width: 600px) {

.service-page {
padding: 60px 0;
}

.books-content h1 {
font-size: 28px;
}

.books-content p {
font-size: 15px;
}

.books-calculator {
padding: 24px;
}

.books-price h2 {
font-size: 26px;
}

}