@charset "utf-8";

/* Open Sans (variable 300–400), hosted here instead of a render-blocking @import from Google Fonts. */
/* cyrillic-ext */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url(/publics/fonts/opensans/opensans-cyrillic-ext.woff2) format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url(/publics/fonts/opensans/opensans-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url(/publics/fonts/opensans/opensans-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url(/publics/fonts/opensans/opensans-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Colours used across many rules; change them here. */
:root {
	--iz-pink: #ff00ca;
	--iz-teal: #008a8a;
	--iz-green: #3c763d;
	--iz-magenta: #cf007a;
	--iz-teal-dark: #00736b;
	--iz-blue: #006b98;
	--iz-lime: #81b214;
}

/* Site-wide guard: never allow the page itself to scroll sideways.
   `clip` (not `hidden`) so no scroll container is created and
   position:sticky descendants keep working. */
html,
body {
	overflow-x: clip;
}

@media print,
screen and (max-width: 40em) {

	.izdavam .changes,
	.izdavam .notchanges {
		min-height: 6.562rem !important;
	}

	/* Pill chips inside the sidebar chip rows must stay compact — the rule
	   above is for the card-style image chips in the custom panel. */
	.izdavam .chip-row .changes,
	.izdavam .chip-row .notchanges,
	.izdavam .chip-row .chip-pubmode,
	.izdavam .chip-row .chip-pubformat,
	.izdavam .chip-row .chip-more {
		min-height: 0 !important;
		padding: 0.45rem 0.9rem !important;
		font-size: 0.875rem !important;
		line-height: 1.25 !important;
	}
}

/* Mobile-only sticky action bar on the publish page. Mirrors the
   .mobile-sticky-buy pattern used on book pages: a centered "Цена" row on
   top and a full-width primary action row below. Colors come from the
   `bg-body` / `border-top` Bootstrap utilities so the bar adapts to the
   data-bs-theme="light|dark" attribute on <html>. */
body.izdavam .mobile-action-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	padding: 0.75rem 1rem;
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

body.izdavam .mobile-action-bar form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

body.izdavam .mobile-action-bar .qty-stepper {
	flex: 0 0 130px;
	width: 130px;
	flex-wrap: nowrap;
}

body.izdavam .mobile-action-bar .qty-stepper .btn {
	flex: 0 0 38px;
	width: auto !important;
	margin: 0 !important;
	box-shadow: none !important;
	padding: 0.4rem 0 !important;
	border-color: var(--bs-border-color) !important;
	color: var(--bs-body-color) !important;
	background-color: var(--bs-tertiary-bg) !important;
	font-size: 1rem !important;
	text-transform: none !important;
}

body.izdavam .mobile-action-bar .qty-stepper .btn:hover,
body.izdavam .mobile-action-bar .qty-stepper .btn:active {
	background-color: var(--bs-secondary-bg) !important;
}

body.izdavam .mobile-action-bar .qty-stepper .book-count {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	-moz-appearance: textfield;
}

body.izdavam .mobile-action-bar .qty-stepper .book-count::-webkit-outer-spin-button,
body.izdavam .mobile-action-bar .qty-stepper .book-count::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Shared "Издаване" CTA — mobile sticky bar AND the desktop sidebar form
   render the same teal/white button (Bootstrap btn-success is overridden so
   the brand colour stays consistent). */
body.izdavam .mobile-action-bar .mobile-buy-btn {
	background-color: var(--iz-teal) !important;
	border-color: var(--iz-teal) !important;
	color: #fff !important;
	font-size: 1rem !important;
	text-transform: uppercase !important;
	font-weight: 600;
	padding: 0.55rem 1rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
	width: auto !important;
	margin: 0 !important;
}

body.izdavam .mobile-action-bar .mobile-buy-btn:hover,
body.izdavam .mobile-action-bar .mobile-buy-btn:active {
	background-color: var(--iz-teal-dark) !important;
	border-color: var(--iz-teal-dark) !important;
	color: #fff !important;
}

/* Desktop publish CTA — same brand teal as the mobile sticky bar so the
   primary action is consistent across breakpoints. Targets only the
   submit-style publish button inside the right summary panel; the
   .videoBtn header buttons share the .publishBtn class but are
   type="button" so they stay untouched. */
body.izdavam #infoblock-summary button[type="submit"].publishBtn {
	background-color: var(--iz-teal) !important;
	border-color: var(--iz-teal) !important;
	color: #fff !important;
}
body.izdavam #infoblock-summary button[type="submit"].publishBtn:hover,
body.izdavam #infoblock-summary button[type="submit"].publishBtn:active,
body.izdavam #infoblock-summary button[type="submit"].publishBtn:focus {
	background-color: var(--iz-teal-dark) !important;
	border-color: var(--iz-teal-dark) !important;
	color: #fff !important;
}

/* Discount tiles in the summary panel — these are clickable shortcuts
   that fill the qty stepper, so they need a "this is interactive" cue
   (cursor + hover background). */
body.izdavam .discountc {
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
body.izdavam .discountc:hover {
	background-color: rgba(0, 138, 138, 0.1);
	border-color: var(--iz-teal) !important;
}

/* Chevron rotates 180deg when the discounts collapse opens. */
body.izdavam [data-bs-toggle="collapse"] .chevron-toggle {
	transition: transform 0.2s ease;
}
body.izdavam [data-bs-toggle="collapse"]:not(.collapsed) .chevron-toggle {
	transform: rotate(180deg);
}

/* Publish page — recolour Bootstrap's default blue (links, accordion
   active state, focus rings) to the brand teal used elsewhere on the
   page. Scoped to .publish-page so the rest of the site keeps Bootstrap
   defaults. */
body.izdavam .publish-page {
	--bs-link-color: var(--iz-teal);
	--bs-link-color-rgb: 0, 138, 138;
	--bs-link-hover-color: var(--iz-teal-dark);
	--bs-link-hover-color-rgb: 0, 115, 107;
}

/* Bootstrap re-declares the accordion CSS variables on .accordion itself,
   so the override has to be on the same selector to win over the default
   blue active state. Active (expanded) icon is always white against the
   teal background; collapsed icon adapts to the data-bs-theme below. */
body.izdavam .publish-page .accordion {
	--bs-accordion-active-color: #fff;
	--bs-accordion-active-bg: var(--iz-teal);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 138, 138, 0.25);
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/* Collapsed-state arrow follows the body theme — dark grey on light bg,
   light grey on dark bg — so it's always readable against whatever
   background the user picked. */
[data-bs-theme="light"] body.izdavam .publish-page .accordion,
[data-bs-theme="light"] .faq-wrapper .accordion {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] body.izdavam .publish-page .accordion,
[data-bs-theme="dark"] .faq-wrapper .accordion {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/* Bootstrap 5.3 redefines --bs-accordion-btn-icon and
   --bs-accordion-btn-active-icon directly on .accordion-button::after
   in dark mode (with the default blue chevron). Variables set on
   .accordion (a parent) get shadowed by that ::after-level override,
   so we have to redefine them at the same ::after level — with higher
   specificity — for the publish page. */
[data-bs-theme="dark"] body.izdavam .publish-page .accordion-button::after,
[data-bs-theme="dark"] .faq-wrapper .accordion-button::after {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/* Form-control focus ring (BookTitle / BookPages) — Bootstrap defaults
   to a blue glow; switch to teal so focus matches the rest of the page. */
body.izdavam .publish-page .form-control:focus,
body.izdavam .publish-page .form-select:focus {
	border-color: var(--iz-teal);
	box-shadow: 0 0 0 0.25rem rgba(0, 138, 138, 0.25);
}

body.izdavam .mobile-action-bar .mobile-action-hint {
	font-size: 0.78rem;
	margin-top: 0.15rem;
}

@media (max-width: 991.98px) {
	body.izdavam .mobile-action-bar {
		display: block;
	}

	body.izdavam:has(.mobile-action-bar) {
		padding-bottom: 130px;
	}
}

a:hover,
a:focus {
	text-decoration: inherit;
}

input,
button,
select,
textarea {
	border-radius: 0 !important;
}

nav.navbar {
	min-height: inherit;
	margin-bottom: 0;
	border: 0;
	z-index: 1030;
}

.navbar-collapse {
	border-top: 0;
}

body.orders a {
	color: #BBC274;
}

body.store .btn.order {
	background: var(--iz-green);
	color: #ffffff;
}

/* Book styles */
.book-cover {
	margin-bottom: 0.625rem;
	width: 9rem;
}

#book-cover .book-cover {
	cursor: pointer;
}

.book-large {
	width: 100%;
}

.book-details {
	font-size: 0.75rem;
	line-height: 1.125rem;
	margin: 0.625rem 0 0.312rem;
}

.book-specs {
	position: relative;
	background: rgba(23, 152, 0, 0.05);
	padding: 1.25rem;
}

.change-params {
	background: rgba(152, 0, 0, 0.05);
	color: #ef4733;
}

.book-specs .spec {
	font-size: 0.75rem;
}

.book-specs .spec-value {
	font-size: 0.875rem;
	margin-bottom: 0.625rem;
}

.book-price {
	font-size: 1.562rem;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-bottom: 1.25rem;
}

.misal {
	font-family: cursive;
}

.order-price {
	font-size: 1.875rem;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1;
	margin-bottom: 0.625rem;
	display: inline-block;
}

/* Realtime section */
.realtime {
	padding: 0.625rem 0;
	background: #000000;
}

.realtime .logo {
	font-weight: 300;
	color: #636363;
	font-size: 2rem;
}

.realtime .data {
	color: #ffffff;
	list-style: none;
	font-size: 0.688rem;
	position: relative;
	top: -1rem;
	margin: 0;
}

.realtime .data li {
	display: inline;
	margin-left: 0.625rem;
	text-transform: lowercase;
}

.realtime .data i {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 2.312rem;
	position: relative;
	top: 0.75rem;
	margin-right: 0.312rem;
}

.realtime .fa {
	color: white;
	font-size: 3.125rem;
	margin: 0 0.312rem;
}

body.services .btn-warning {
	color: black;
}

/* Infoblock styles — target the primary submit only so other buttons inside
   the form (e.g. the qty-stepper ±) don't inherit the big-CTA styling. */
#infoblock form button[type="submit"] {
	width: 100%;
	margin: 0.625rem 0;
	box-shadow: 0.125rem 0.125rem 0.125rem black;
	background-color: #00c5c5;
	border-color: #00c5c5;
	font-size: x-large;
	color: black;
	text-transform: uppercase;
}

#infoblock form button[type="submit"]:hover {
	background-color: var(--iz-teal);
	border-color: var(--iz-teal);
}

#infoblock a button {
	width: 100%;
	margin: 0.625rem 0;
	background-color: #ccf3f3;
	border-color: #ccf3f3;
	color: black;
}

.discountc {
	cursor: pointer;
}

/* Misc styles */
input[type=text][class*="col-"] {
	padding: 0;
}

input#BookPages {
	text-align: center;
}

/* Pagination styles */
.pagination {
	border-radius: 0 !important;
}

body.store .pagination li {
	float: left;
	width: 3.125rem;
}

body.store .pagination li a {
	background: none;
	border: none;
	font-size: 1.875rem;
	line-height: 2.5rem;
	color: #7de3ad;
	width: 3.125rem;
}

body.store .pagination li a[href] {
	background-color: var(--iz-green);
	color: #ffffff;
	font-size: 1.188rem;
	margin: 0 0.062rem 0 0;
	width: 3.125rem;
	height: 3.125rem;
}

/* Breadcrumb styles */
.breadcrumb {
	background: none !important;
	margin-bottom: 0 !important;
	padding: 1.25rem 0 !important;
	font-size: 0.75rem;
}

.breadcrumb a {
	color: #4a4a4a;
}

hr.total {
	border: 0.062rem solid #7b7b7b;
	border-width: 0.062rem 0 0 0;
	margin: 0.625rem 0;
	clear: both;
}

.total-price {
	text-align: right;
}

.total-price.real>span {
	text-decoration: line-through;
}

.total-price.discount {
	color: red;
}

.total-price.total {
	font-weight: 500;
	margin-bottom: 0.625rem;
}

.price-version {
		cursor: pointer;
	margin: 0 0 0.938rem 0;
	opacity: .5;
}

.price-version:not(.active) {
	opacity: 0.7;
}

.price-version .version-icon {
	visibility: hidden;
	transition: color 0.2s ease, visibility 0.2s ease;
}

.price-version.active .version-icon {
	visibility: visible;
	color: var(--iz-green);
}

.price-version.active {
	opacity: 1;
}

.price-version label {
	font-weight: normal;
	margin: 0;
}

.version-input {
	cursor: text;
}

/* Author page styles */
.author .book-cover {
	max-width: 100%;
}

/* Order quantity styles */
.order-quantity {
	font-size: 1.375rem;
	display: inline-block;
	position: relative;
}

.order-quantity input {
	outline: none;
	text-align: center;
}

.number {
	width: 4.688rem;
	background: #ffffff;
	padding: 0.312rem;
	border: 0.062rem solid #ccc;
}

/* Services tab styles */
/* Legacy `body.services` rules for .tab/.tab-content/.service/h2 removed
   2026-07-21: no services view uses those classes anymore, and the generic
   selectors kept hijacking shared components (FAQ widget, login modal). */

.price {
	font-size: 1.125rem;
}

.price .book-price {
	font-size: 1.875rem;
	display: inline;
}

/* Pricing table styles */
table.prices small {
	display: block;
}

table.prices .price {
	text-align: right;
}

table.prices .price .book-price {
	font-size: 1.25rem;
}

table.prices .price.old {
	text-align: right;
	opacity: .6;
}

table.prices .price.old .book-price {
	text-decoration: line-through;
}

table.prices h2 {
	color: #000000;
}

table.prices tfoot h2 {
	margin: 0;
}

.right {
	float: right;
	background: var(--iz-pink) url(../img/template/site/arrow-right.png) right center no-repeat;
	padding-right: 3.125rem;
	padding-left: 0.625rem;
}

/* Profile styles */
body.profile .tab-content .form-control {
	margin: 0.5rem 0;
	border: 0.062rem solid #c7c7c7;
	box-shadow: none;
	font-size: 1.25rem;
	color: #666666;
	padding: 1.25rem 0.938rem;
}

.login-padding {
	padding: 0.625rem !important;
}

body.profile .nav-tabs>li.active>a,
body.profile .nav-tabs>li.active>a:hover,
body.profile .nav-tabs>li.active>a:focus {
	border-radius: 0;
	background-color: var(--iz-pink);
	border: 0.062rem solid var(--iz-pink);
	color: #ffffff;
	padding: 0.938rem 1.25rem;
	font-size: 1.125rem;
}

body.profile .nav-tabs>li>a {
	padding: 0.938rem 1.25rem;
	color: #666;
	font-size: 1.125rem;
	border-radius: 0;
	background-color: rgba(0, 0, 0, .05);
}

body.profile .tab-content {
	margin-bottom: 3.75rem;
}

body.profile .nav-pills li {
	border-radius: 0;
}

body.profile .nav-pills a {
	color: #666;
	border-radius: 0;
}

body.profile .nav-pills .active a {
	background: var(--iz-pink) url(../img/template/site/arrow-right.png) right center no-repeat;
	color: white;
}

/* Bootstrap 5 puts .active on the .nav-link itself (no li.active wrapper) */
body.profile .nav-pills .nav-link {
	color: #666;
	border-radius: 0;
}

body.profile .nav-pills .nav-link.active {
	background-color: var(--iz-pink);
	color: #ffffff;
}

body.profile .table td {
	vertical-align: middle;
}

body.profile .table td a {
	color: #666666;
	text-decoration: underline;
}

body.profile .table td a i {
	color: crimson;
	font-size: x-small;
}

body.profile .book-actions {
	white-space: nowrap;
	width: 0.062rem;
}

body.profile .book-actions.checkfilter i {
	color: inherit;
	font-size: 1.5rem;
	margin: 0 0.312rem;
}

body.profile .book-actions.checkfilter label {
	display: unset;
}

body.profile .book-actions.checkfilter .active {
	color: var(--iz-pink);
}

body.profile .book-actions i {
	color: inherit;
	font-size: 1.5rem;
}

body.profile .order_icons i {
	color: inherit;
	font-size: 1.5rem;
	margin: 0 0.312rem;
}

body.profile .order_icons .active, body.profile .exclude_icons i .active {
	color: var(--iz-pink);
}

/* Miscellaneous styles */
.addresses {
	list-style: none;
	padding: 0;
	margin: 0;
	display: table;
}

.addresses li a.fas {
	color: #666;
	display: block;
}

.addresses li div {
	vertical-align: middle;
	font-size: 0.812rem;
}

.addresses li .fa-check {
	font-size: 150%;
	color: #739900;
}

.addresses li.active,
.addresses li.actives {
	background: rgba(114, 152, 0, .2);
}

.addresses li.active .fas,
.addresses li.actives .fas {
	color: #666;
	display: block;
}

.payment {
	/* display: grid; */
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--spacing-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.payment li {
	cursor: pointer;
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	transition: all 0.2s ease;
	align-items: center;
	justify-content: center;
	margin: 10px;
	border: 2px solid transparent;
}

.payment li.active {
	border: 2px solid var(--iz-lime);
	box-shadow: 0 0 15px rgba(129, 178, 20, 0.4);
	background: rgba(129, 178, 20, 0.1);
}

/* Additional styles */
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
	background-color: var(--iz-magenta) !important;
}

.dropdown-item.active {
	color: inherit !important;
	background-color: transparent !important;
}

.profile .dropdown-menu>.active>a,
.profile .dropdown-menu>.active>a:hover,
.profile .dropdown-menu>.active>a:focus,
.profile .dropdown-menu>.active>h5>a,
.profile .dropdown-menu>.active>h5>a:hover,
.profile .dropdown-menu>.active>h5>a:focus {
	background-color: var(--iz-magenta) !important;
}

body.store .dropdown-menu {
	overflow: hidden;
	width: 100%;
	right: 0;
	left: inherit;
}

body.store .dropdown-menu.row {
	overflow: hidden;
	width: auto;
	left: 0;
	right: inherit;
}

i span {
	font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
}

.submenu {
	font-size: 1.125rem;
}

.classicalbookinfo {
	background-color: var(--iz-green);
	padding: 0.312rem;
	text-align: center;
	font-size: smaller;
	color: white;
	border-radius: 0.938rem;
}

a {
	text-decoration: none;
}

h1 {
	font-size: x-large;
}

h2 {
	font-size: large;
}

body:not(.read) nav.navbar {
	z-index: 3;
	background-color: rgb(255, 255, 255, 0.9) !important;
}

.navbar-light .navbar-toggler {
	border-color: transparent;
}

.disabled,
input[disabled] {
	cursor: not-allowed;
}

.cap-first-letter {
	text-transform: capitalize;
}

#error-msg {
	padding: 1rem;
	background-color: brown;
	color: white;
	text-align: center;
	font-size: smaller;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn.btn-outline-danger a {
	color: #dc3545;
}

.btn.btn-outline-danger:hover a,
.btn.btn-outline-danger a:hover,
body.store .btn-outline-dark:hover a,
body.store .btn-outline-dark.active a {
	color: white;
}

.row {
	margin-bottom: initial;
}

.main-container {
	min-height: 30rem;
}

.dropdown-menu {
	width: auto !important;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>h5>a,
.dropdown-menu>.active>h5>a:hover,
.dropdown-menu>.active>h5>a:focus {
	background-color: initial !important;
	color: rgba(0, 0, 0, .9) !important;
}

body.home .nav-item .active,
body.home .dropdown-item:hover,
body.writer .dropdown-item:hover {
	color: var(--iz-blue) !important;
	background-color: inherit !important;
}

body.home .card a {
	color: initial;
	text-decoration: none;
}

.col.book-info {
	max-width: 11rem;
	padding: 0;
	margin: 0.5rem;
}

.book-info a {
	color: initial;
	text-decoration: none;
}

body:not(.read) .navbar-brand img {
	width: 8rem;
}

.dropdown-menu.searchhelp {
	width: inherit;
}

#back-to-top-btn {
	position: fixed;
	bottom: 4rem;
	right: 0rem;
	display: none;
	font-size: 3rem;
	border-radius: 50%;
	padding: 2rem;
	z-index: 9999;
}

/* fix search dropdown menu from style.css  */
body.store .dropdown:not(.profileIcon) .dropdown-menu {
	overflow: initial;
	width: inherit;
	right: initial;
	left: inherit;
}

.profileIcon {
	padding: 0.3rem 0rem 0rem 1rem;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>h5>a:focus {
	color: initial !important;
	background-color: initial !important;
}

.modal-dialog {
	max-width: 100vh;
	margin: auto;
}

.modal-content {
	height: 100%;
	position: relative;
}

/* guest login modal: undo the global full-size modal override above,
   back to standard Bootstrap sizing (natural height, centered) */
#loginModal .modal-dialog {
	max-width: none;
	margin: 0.5rem;
}

#loginModal .modal-content {
	height: auto;
}

@media (min-width: 576px) {
	#loginModal .modal-dialog {
		max-width: 500px;
		margin: 1.75rem auto;
	}
}

/* Shield the guest login modal from legacy `body.services` page styles
   (orange .tab-content + float, brown oversized h2, orange .w-100) —
   same reset pattern as .faq-wrapper further down. */
#loginModal .tab-content {
	background: transparent !important;
	float: none !important;
	margin: 0 !important;
	width: 100%;
}

#loginModal h2 {
	color: inherit !important;
	font-size: 1.35rem;
	font-weight: 600;
}

#loginModal .w-100 {
	background-color: transparent !important;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
}

.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.twofa input[type="number"]::-webkit-inner-spin-button,
.twofa input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

body.create .dropdown-menu>li>a:hover,
body.create .dropdown-menu>li>a:focus,
body.create .dropdown-menu>li>h5>a:hover,
body.create .dropdown-menu>li>h5>a:focus,
body.writer .dropdown-menu>li>a:hover,
body.writer .dropdown-menu>li>a:focus,
body.writer .dropdown-menu>li>h5>a:hover,
body.writer .dropdown-menu>li>h5>a:focus {
	background-color: inherit !important;
	color: var(--iz-blue) !important;
}

body.create .nav-link.active i,
body.create .beta-text span,
body.create .text-primary,
body.create .page-link,
body.create .btn-outline-primary {
	color: var(--iz-blue) !important;
}

body.create .btn-primary,
body.create .active>.page-link,
body.create .btn-outline-primary:hover {
	background-color: var(--iz-blue);
	color: white !important;
}

/*menu colors changes for every section*/

body.izdavam .nav-item .active,
body.izdavam .dropdown-item:hover,
body.izdavam .dropdown-item:active,
body.izdavam .dropdown-item:focus {
	background-color: inherit !important;
}

body.izdavam .nav-item .active {
	color: initial;
}

body.izdavam .dropdown-item:hover,
body.izdavam .dropdown-item:active,
body.izdavam .dropdown-item:focus,
body.izdavam .nav-link.active i {
	color: var(--iz-teal) !important;
}

body.izdavam .changes,
body.izdavam .videoBtn,
body.izdavam .chip-more,
body.izdavam .chip-pubmode,
body.izdavam .chip-pubformat {
	--bs-btn-color: var(--iz-teal);
	--bs-btn-border-color: var(--iz-teal);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--iz-teal);
	--bs-btn-hover-border-color: var(--iz-teal);
	--bs-btn-focus-shadow-rgb: 13, 110, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--iz-teal);
	--bs-btn-active-border-color: var(--iz-teal);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--iz-teal);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--iz-teal);
	--bs-gradient: none;
}

body.izdavam .changes,
body.izdavam .chip-more,
body.izdavam .chip-pubmode,
body.izdavam .chip-pubformat {
	border: 1px solid var(--iz-teal);
	color: var(--iz-teal);
	background-color: transparent;
}

body.izdavam .changes.active,
body.izdavam .chip-pubmode.active,
body.izdavam .chip-pubformat.active {
	background-color: var(--iz-teal) !important;
	color: #fff !important;
}

/*ENDmenu colors changes for every section*/

body.izdavam .main-container {
	min-height: 70rem;
}

/* Disabled chips in the publish sidebar: must accept hover (native title
   tooltip) and tap (JS toast with reason). The `cursor: help` hints that
   hovering/tapping yields an explanation rather than activating an option. */
body.izdavam .chip-row .notchanges {
	pointer-events: auto;
	cursor: help;
}

body.izdavam .notchanges img {
	background-color: #f1f1f1;
}

.pointer {
	cursor: pointer;
}

body.izdavam .embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

body.izdavam .embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body.store .nav-item .active,
body.store .dropdown-item:hover,
body.store .dropdown-item:active,
body.store .dropdown-item:focus {
	background-color: inherit !important;
}

body.store .nav-item .active {
	color: initial;
}

body.store .dropdown-item:hover,
body.store .dropdown-item:active,
body.store .dropdown-item:focus {
	color: var(--iz-green) !important;
}

body.store .nav-link.active i,
body.store .price-version.active i {
	color: var(--iz-green);
}

body.store a {
	color: inherit;
}

body.store .main-container .dropdown-menu {
	right: initial;
}

body.store .book-info,
body.library .ebook .col {
	max-width: 10rem;
	padding: 0rem 0.5rem;
}

body.store .btn-outline-dark.active,
body.store .btn-outline-dark:active,
body.store .btn-outline-dark:hover,
body.store .btn-outline-dark:focus,
body.store .btn-check:active+.btn-outline-dark,
body.store .btn-check:checked+.btn-outline-dark,
body.store .btn-outline-dark.active,
body.store .btn-outline-dark.dropdown-toggle.show,
body.store .btn-outline-dark:active {
	background-color: var(--iz-green);
	color: white;
}

body.store .book-details {
	font-size: 0.8rem;
	line-height: initial;
}

body.store #loadmore button {
	width: inherit;
}

body.store .modal-footer .btn-secondary {
	padding: 0.7rem 1rem;
}

body.store .book-specs .btn-success {
	background-color: var(--iz-green);
	border-color: var(--iz-green);
}

body.store .more-details {
	padding: 1rem 0rem;
}

body.store button.disabled {
	border-color: white;
}

body.store form.bookset {
	margin-bottom: 0rem;
}

body.store .col-2.included-in-set {
	width: min-content;
}

body.store .videoBtn {
	color: var(--iz-green);
	border-color: var(--iz-green);
}

body.store .videoBtn:hover {
	background-color: var(--iz-green);
	border-color: var(--iz-green);
	color: white;
}

body.library .nav-item .active,
body.library .dropdown-item:hover,
body.library .dropdown-item:active,
body.library .dropdown-item:focus {
	background-color: inherit !important;
}

body.library .dropdown-item:hover,
body.library .dropdown-item:active,
body.library .dropdown-item:focus,
body.library .nav-link.active i,
body.library .changes.active {
	color: #19A600 !important;
}

body.library h1 {
	font-size: x-large;
	margin: initial;
}

body.library a {
	color: initial;
}

body.library .ebook>div {
	height: 22rem;
}

body.library .nav-item .active {
	color: initial;
}

body.services .nav-item .active,
body.services .dropdown-item:hover,
body.services .dropdown-item:active,
body.services .dropdown-item:focus {
	background-color: inherit !important;
}

body.services .nav-item .active {
	color: initial;
}

body.services .dropdown-item:hover,
body.services .dropdown-item:active,
body.services .dropdown-item:focus,
body.services .nav-link.active i,
body.services .changes.active {
	color: #e76d00 !important;
	background-color: inherit !important;
}

body.services a {
	color: #e76d00;
}

/* Orange CTA buttons on services pages — explicit .btn.order instead of the
   old `.w-100:not(.searchhelp)` catch-all that painted every full-width
   element orange (incl. Bootstrap components rendered inside the page). */
body.services .btn.order {
	background-color: #e76d00;
}

body.services #fullpackets .card-header {
	min-height: 14rem;
}

body.orders .dropdown-item:hover,
body.orders .dropdown-item:active,
body.orders .dropdown-item:focus,
body.orders .nav-link.active i,
body.orders .changes.active {
	color: var(--iz-lime) !important;
	background-color: inherit !important;
}

body.orders .navbar .fas.fa-shopping-cart,
#cart-full {
	color: var(--iz-lime);
}

body.orders .navbar .fas.fa-shopping-cart span,
body.orders .accordion-button:not(.collapsed),
body.orders .btn-outline-success:hover {
	color: white;
	background-color: var(--iz-lime) !important;
}

body.orders .payment li.active {
	border: 0.062rem solid;
}

body.orders .accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

body.orders .accordion-button:focus {
	z-index: 2;
}

body.orders .min-vh-25 i {
	font-size: 10rem;
}

body.orders .book_button,
#color-white {
	color: white;
}

body.orders .btn-outline-success {
	width: max-content;
	color: var(--iz-lime);
	border-color: var(--iz-lime);
}

body.orders .hideIfRevolut img,
body.orders .hideIfRevolut i {
	margin: inherit;
}

body.orders .payment li.izdavam {
	max-width: 9rem;
}

body.orders .icon {
	font-size: 6rem;
}

.addresses li {
	padding: 0.625rem;
	background: rgba(245, 134, 52, .1);
	float: left;
	margin-bottom: 0.312rem;
	border: 0.1rem black dashed;
}
body.profile .nav-item .active {
	color: initial;
}

body.profile .dropdown-item:hover,
body.profile .dropdown-item:active,
body.profile .dropdown-item:focus,
body.profile .nav-link.active i,
body.profile .changes.active {
	color: var(--iz-magenta) !important;
}

/* With these more specific selectors */
body.profile .btn.btn-primary,
body.profile .btn.btn-secondary,
body.profile .btn.btn-success,
body.profile .btn.btn-danger,
body.profile .btn.btn-warning,
body.profile .btn.btn-info,
body.profile .btn.btn-dark {
	background-color: var(--iz-magenta);
	border-color: var(--iz-magenta);
	--bs-btn-focus-shadow-rgb: 207, 0, 122;
}

body.profile .btn.notwith {
	background-color: inherit;
}

body.profile .btn.notwith:hover {
	color: inherit;
}

body.profile .btn.btn-light {
	background-color: inherit;
}

body.profile #UserAll li {
	display: block;
	min-height: 20rem;
}

body.profile .nav-link {
	color: var(--iz-magenta);
}

body.profile .login .nav-link,
body.profile .nav-link.active i {
	color: black !important;
}

body.profile .edit-input {
	position: absolute;
	right: 0.625rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--iz-pink);
}

body.profile .payment li {
	margin: 0.5rem;
	min-height: 7rem;
	min-width: 7rem;
}

/* Wallet payout list uses the cart-style radio rows, not square tiles */
body.profile .payment.payout-list li {
	margin: 0 0 0.5rem;
	min-height: auto;
	min-width: auto;
	justify-content: flex-start;
}

body.profile input,
body.profile select {
	border-radius: 2rem !important;
}

body.profile .spec-value a {
	color: white;
}

body.profile .prices input {
	width: 5rem;
}

body.profile .booktitle {
	width: 100%;
}

body.profile a.book_button {
	color: white;
}

/* Light mode styles */
body.profile :root {
	--diff-deleted-bg: rgba(var(--bs-danger-rgb), 0.15);
	--diff-deleted-color: var(--bs-danger);
	--diff-added-bg: rgba(var(--bs-success-rgb), 0.15);
	--diff-added-color: var(--bs-success);
}

/* Dark mode styles */
body.profile [data-bs-theme="dark"] {
	--diff-deleted-bg: rgba(var(--bs-danger-rgb), 0.25);
	--diff-deleted-color: var(--bs-danger-text);
	--diff-added-bg: rgba(var(--bs-success-rgb), 0.25);
	--diff-added-color: var(--bs-success-text);
}

/* Progress bar customization */
body.profile .progress {
	height: 1.5rem;
	background-color: var(--diff-bg);
}

body.docs .about-us img {
	width: 20rem;
}

body.docs .about-us .card {
	max-width: 35rem;
	border: initial;
}

footer .realtime a {
	color: white;
	text-decoration: none;
	padding: 0rem 0.5rem;
}

footer .footer-details {
	padding: 1.5rem 0rem;
}

footer .pages a {
	color: black;
	text-decoration: none;
	font-size: small;
}

footer .footer-details>div {
	font-size: small;
}

.footer-logo {
	padding-left: 0rem;
}

.hidden {
	display: none !important;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

body.read #total-pages {
	white-space: nowrap;
}

body.read #page-index {
	width: 5rem;
	flex: 0 0 auto;
}

/* login */

.helpful_text {
	font-size: xx-small;
}

.login {
	padding: 0.938rem;
	border-radius: 0.625rem;
}

.login i {
	color: white;
	font-size: 1.25rem;
}

/* orders */

#delete {
	float: right;
	margin-bottom: -0.062rem;
	cursor: pointer;
}

.clear-both {
	clear: both;
}

#tab-05>h2 {
	margin: 3.125rem 0rem;
	text-align: center;
}

#subwidsdisplay .tab-content .form-control {
	margin: 0.5rem 0;
	border: 0.062rem solid #c7c7c7;
	box-shadow: none;
	font-size: 1.312rem;
	color: #666666;
	padding: 1.25rem 0.938rem;
}

#subwidsdisplay .col-md-9 h1 {
	text-align: center;
}

.btn-pink {
	padding: 0.625rem;
	color: #ffffff;
	font-size: 1.125rem;
	margin: 0.625rem 0 0 0;
	display: block;
	border: none;
	outline: none;
	width: 100%;
	background: #B0CB1F;
}

a:hover {
	text-decoration: none;
}

table td:first-child {
	font-weight: bold;
}

.count_input {
	width: 6.25rem;
	color: black;
}

.cart_quantity {
	width: 4.375rem;
	font-size: 1.375rem;
}

.loading_center {
	width: 9.688rem;
	margin: 1.25rem auto;
}

.shipment_center_info {
	margin-left: auto;
	margin-right: auto;
	float: none;
}

body.orders table td:nth-child(5) {
	width: 11.875rem;
}

body.orders table td:nth-child(6) {
	width: 11.875rem;
}

.progress_bar>div {
	background-color: #B0CB1F;
	width: 60%;
	/*мести се с javascript*/
	height: 1.25rem;
	border-radius: 0.625rem;
}

form button.fa.fa-cc-paypal.fa-3x {
	border: none;
	background: transparent;
}

#AddressList ul li {
	min-width: 21.25rem;
	min-height: 12rem;
}

.book-actions .fas.fa-trash-alt {
	font-size: 1.25rem;
}

/* Light mode - searchhelp background */
ul.searchhelp {
	/* backdrop-filter: blur(8px);
	*/
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	transition: all 0.2s ease;
	background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Dark mode - searchhelp background */
.dark ul.searchhelp,
body.dark ul.searchhelp,
[data-bs-theme="dark"] ul.searchhelp {
	background-color: rgba(33, 37, 41, 0.95) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Override page-specific colors for search dropdown items */
ul.searchhelp .dropdown-item,
ul.searchhelp .dropdown-item:hover,
ul.searchhelp .dropdown-item:active,
ul.searchhelp .dropdown-item:focus {
	background-color: transparent !important;
	color: inherit !important;
}

/* Hover effect - light mode */
ul.searchhelp .dropdown-item:hover {
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Hover effect - dark mode */
.dark ul.searchhelp .dropdown-item:hover,
body.dark ul.searchhelp .dropdown-item:hover,
[data-bs-theme="dark"] ul.searchhelp .dropdown-item:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.search-item:last-child .dropdown-item {
	border-bottom: none !important;
}

.dropdown-item:hover {
	transform: translateX(4px);
	transition: transform 0.2s ease;
}

/* Add to your stylesheet */
@media (max-width: 768px) {
	.searchhelp {
		position: fixed !important;
		top: 60px !important;
		/* Adjust based on your navbar height */
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		margin: 0.5rem !important;
		border-radius: 1rem !important;
		max-height: 60vh !important;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
		z-index: 1050 !important;
		/* Make sure it's above other elements */
	}

	.searchhelp::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: -1;
	}
}

ul.searchhelp .cover {
	float: right;
	display: block;
	clear: both;
	max-height: 6.25rem;
	overflow: hidden;
	text-decoration: none;
}

ul.searchhelp .image {
	position: static;
	float: left;
}

ul.searchhelp .details {
	font-size: 0.625rem;
}

/* Код за "Лични Данни" */

textarea.writes {
	height: 18.75rem;
}

textarea {
	height: 100%;
	width: 100%;
}

/* Legacy global override of Bootstrap's .col-md-5 (300px). Kept for desktop,
   but below the md breakpoint it must not apply — Bootstrap stacks columns
   full-width there (service view, user orders buy column). */
@media (min-width: 768px) {
	.col-md-5 {
		width: 18.75rem;
	}
}

.col-md-5 {
	margin-bottom: 3.125rem;
}

.book-specs input {
	border: 0.062rem solid #CCC;
	padding: 0.375rem 0rem 0.375rem 0.625rem;
	font-size: 1.125rem;
	width: 100%;
}

/* Код за "Адрес" */

#addresscityinput {
	width: 89%;
	display: inline-block;
}

#addresspaddingright {
	padding-right: 0rem;
}

#addresspaddingleft {
	padding-left: 0rem;
}

.office {
	margin: 0.938rem auto;
	width: 100%;
}

ul.office li {
	width: 100%;
}

.tab-pane .col-sm-8 {
	width: 90%;
}

.office td {
	padding: 0rem 0.625rem;
	width: 15.625rem;
}

.delivery-title {
	margin-left: 0.938rem;
}

.book_button {
	background: var(--iz-pink);
	width: 100%;
	padding-right: 0;
	padding-left: 0;
	padding: 0.625rem 1rem;
	font-size: 1.125rem;
	line-height: 1.33;
	border-radius: 0.375rem;
	color: #ffffff;
	text-decoration: none;
	border: 0.062rem solid transparent;
	margin: 0.312rem 0.312rem 0.312rem 0rem;
	text-align: center;
	display: inline-block;
	cursor: pointer;
}

.book_button:hover {
	-moz-box-shadow: inset 0 0.062rem 0 rgba(255, 255, 255, 0.5), 0rem 0.062rem 0.125rem rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 0.062rem 0 rgba(255, 255, 255, 0.5), 0rem 0.062rem 0.125rem rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0.062rem 0 rgba(255, 255, 255, 0.5), 0rem 0.062rem 0.125rem rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 0.188rem;
	-moz-border-radius: 0.188rem;
	border-radius: 0.188rem;
}

.book_button a {
	color: #ffffff;
	font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
	margin-left: 0.312rem;
}

.message {
	width: 100%;
	height: 9.375rem;
	border: 0.062rem solid #CCC;
	background: white;
	float: left;
}

.booktitle {
	width: 43.75rem;
	margin: 0 0 0.938rem 0;
	font-size: 1.75rem;
	height: 3.75rem;
}

.prices {
	margin: 0.938rem 0;
	font-size: 1.125rem;
}

.prices input {
	border: 0.062rem solid #CCC;
	background: white;
	padding: 0.375rem 0rem 0.375rem 0.625rem;
	font-size: 1.125rem;
	width: 5rem;
}

#uploaded_file {
	background: var(--iz-magenta);
}

#uploaded_file a {
	color: #ffffff;
	font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
	margin-left: 0.312rem;
}

.margin-bottom {
	margin-bottom: 0.938rem;
}

#button_genres {
	float: inherit;
}

.progress_bar {
	background-color: black;
	border-radius: 0.812rem;
	padding: 0.188rem;
}

.progress_bar .bar {
	background-color: var(--iz-pink);
	width: 60%;
	/*мести се с javascript*/
	height: 1.25rem;
	border-radius: 0.625rem;
}

.publish_book_spec_title {
	font-weight: bold;
}

.upload_form {
	cursor: pointer;
}

#DeleteBook {
	cursor: pointer;
}

/* Всички потребители */

.small-pic {
	width: 4.375rem;
}

#UserAll {
	display: block;
}

/* Grid keeps every card on a clean row and stretches each one to the tallest
   in its row, so uneven content (extra buttons, the role dropdown) no longer
   makes cards wrap onto random positions. */
#UserResult {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
	gap: 0.625rem;
	width: 100%;
	margin: 0;
	padding: 0;
}

#UserAll li img {
	float: left;
}

#UserAll li {
	float: none;
	height: auto;
	list-style: none;
	margin: 0;
	width: auto;
	padding: 0.625rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.5rem;
	overflow: hidden;
}

#UserAll div.liplus {
	margin-left: 6.562rem;
	padding: 0.312rem;
	min-height: 12.5rem;
}

/* Калкулатор */

.col-sm-9 .calculator {
	width: 100%;
	margin-top: 1.25rem;
}

.col-sm-9 .calculator td:first-child {
	width: 30%;
}

/* Отстъпки */

.discount-input {
	width: 6.25rem;
}

/* Начална страница за операторите */

.tab-pane.fade h2 {
	text-align: center;
}

#home_board>a>div {
	border: 0.062rem green solid;
	padding: 0.062rem;
}

#home_board>a:visited>div {
	border: 0.062rem green solid;
	padding: 0.062rem;
	background-color: rgba(187, 237, 195, 0.7);
}

caption {
	font-size: 1.375rem;
	font-weight: bold;
}

/* Услуги */
.margin-left {
	margin-left: 0.25rem;
}

/* Всички поръчки */
.profile .row>div {
	margin: 0.312rem 0rem;
}

/* Всички книги */
.clicable {
	cursor: pointer;
}

.nounder {
	text-decoration: none !important;
}

/* Plain links only: a .btn inside an info alert keeps its own colour,
   otherwise it renders blue text on a green/teal border. */
.alert.alert-info a:not(.btn) {
	color: #31708f;
}

/* proaccounts  */
.onProAccount,
.debut,
.loreat {
	background-color: var(--iz-magenta);
}

.priceProAccounts {
	color: var(--iz-magenta);
	font-weight: 600;
	font-size: x-large;
	width: 19rem;
}

.priceProAccounts span {
	font-size: 1rem;
	font-weight: normal;
}

.bought {
	color: white;
}

.init-col {
	width: 13rem;
}

/* Modern Book Styles */
.modern-book-wrapper {
	perspective: 1000px;
	margin: 0;
	padding: 0;
	width: 100%;
}

.modern-book {
	position: relative;
	width: var(--book-width);
	height: var(--book-height);
	transition: transform 0.3s ease-in-out;
	transform-style: preserve-3d;
}

.modern-book:hover {
	transform: translateY(-0.5rem) rotateY(5deg);
	box-shadow:
		0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1),
		-0.25rem 0 0.5rem rgba(0, 0, 0, 0.05);
}

.modern-book-cover {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 0.25rem;
	overflow: hidden;
}

.modern-book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.modern-book:hover .modern-book-cover img {
	transform: scale(1.02);
}

.modern-book-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	color: white;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.modern-book:hover .modern-book-info {
	opacity: 1;
}

.book-author {
	font-size: 0.875rem;
	margin: 0;
	font-weight: 500;
}

.book-title {
	font-size: 1rem;
	margin: 0.25rem 0 0;
	font-weight: 400;
}
/* Book Details Section */
.modern-book-details {
	padding: 1rem 0.5rem;
	transition: transform 0.2s ease-in-out;
}

.modern-book-title {
	font-size: 1rem;
	font-weight: 500;
	margin: 0 0 0.5rem 0;
	line-height: 1.4;
}

.modern-book-author {
	font-size: 0.875rem;
	color: #666;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Price Section */
.modern-price-section {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.5rem;
}

.modern-price-original {
	font-size: 0.875rem;
	color: #999;
	text-decoration: line-through;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.modern-price-current {
	font-size: 1rem;
	color: var(--iz-green);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.modern-price-ebook {
	font-size: 1rem;
	color: #2c3e50;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Icons */
.modern-info-icon {
	margin-left: 0.5rem;
	color: #666;
	transition: color 0.2s ease-in-out;
	cursor: pointer;
}

.modern-info-icon:hover {
	color: var(--iz-green);
}

.fas {
	font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.modern-book-details {
		padding: 0.75rem 0.25rem;
	}

	.modern-book-title {
		font-size: 0.875rem;
	}

	.modern-book-author {
		font-size: 0.75rem;
	}
}

/* book modern preview */
.modern-book-container {
	position: relative;
	transition: all 0.3s ease;
}

.modern-preview-trigger {
	cursor: pointer;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-preview-trigger:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.modern-book-image {
	width: 100%;
	height: auto;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	backface-visibility: hidden;
}

.modern-book-container:hover .modern-book-image {
	transform: scale(1.02);
}

.modern-preview-badge {
	position: absolute;
	top: 12px;
	left: 0;
	background-color: rgba(60, 118, 61, 0.9);
	color: white;
	padding: 8px 16px;
	border-radius: 0 4px 4px 0;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 2;
	transition: all 0.3s ease;
}

.modern-preview-badge:hover {
	background-color: rgba(60, 118, 61, 1);
}

.preview-text {
	font-weight: 500;
	letter-spacing: 0.5px;
}

.page-counter {
	opacity: 0.9;
	font-size: 0.9em;
}

/* Mobile optimizations */
@media (max-width: 768px) {
	.modern-preview-trigger {
		transform: none;
	}

	.modern-preview-trigger:hover {
		transform: none;
	}

	.modern-preview-badge {
		padding: 6px 12px;
		font-size: 13px;
	}
}

/* Fullscreen preview overlay (desktop only) */
.modern-preview-fullscreen {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}

.modern-preview-fullscreen.is-open {
	display: flex;
}

.modern-preview-fullscreen-image {
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: pointer;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	border-radius: 4px;
}

.modern-preview-fullscreen-badge {
	position: fixed;
	top: 20px;
	left: 20px;
	background-color: rgba(60, 118, 61, 0.92);
	color: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	z-index: 2001;
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.modern-preview-fullscreen-badge .preview-text {
	font-weight: 500;
	letter-spacing: 0.5px;
}

.modern-preview-fullscreen-badge .page-counter {
	opacity: 0.9;
	font-size: 0.9em;
}

body.modern-preview-fullscreen-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.modern-preview-fullscreen {
		display: none !important;
	}
}

.nordic-book:hover {
	transform: translateY(-5px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.nordic-book-cover {
	background-color: transparent;
	border-radius: 0.5rem 0.5rem 0 0;
	overflow: hidden;
	position: relative;
}

.nordic-book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.5rem 0.5rem 0 0;
}

/* Light mode styles */
[data-bs-theme="light"] .library .card-body,
.library .card-body {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 0 0 0.5rem 0.5rem;
}

[data-bs-theme="light"] .nordic-book-title,
.nordic-book-title {
	color: var(--bs-gray-800);
	font-weight: 500;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

[data-bs-theme="light"] .nordic-book-author,
.nordic-book-author {
	color: var(--bs-gray-600);
}

/* Hover states */
.nordic-book a:hover .nordic-book-title {
	color: #19A600 !important;
}

/* Dark mode styles */
[data-bs-theme="dark"] .library .card-body {
	background-color: rgba(33, 37, 41, 0.9);
}

[data-bs-theme="dark"] .nordic-book-title {
	color: var(--bs-light);
}

[data-bs-theme="dark"] .nordic-book-author {
	color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .nordic-book:hover {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

.badge {
	font-weight: 500;
}

/* Loading animation */
.nordic-book {
	transition: all 0.3s ease;
	background: transparent;
	border-radius: 0.5rem;
	animation: fadeInUp 0.5s ease-out forwards;
	opacity: 0;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Stagger the animation for each book */
.row>div:nth-child(1) .nordic-book {
	animation-delay: 0.1s;
}

.row>div:nth-child(2) .nordic-book {
	animation-delay: 0.2s;
}

.row>div:nth-child(3) .nordic-book {
	animation-delay: 0.3s;
}

.row>div:nth-child(4) .nordic-book {
	animation-delay: 0.4s;
}

.row>div:nth-child(5) .nordic-book {
	animation-delay: 0.5s;
}

.row>div:nth-child(6) .nordic-book {
	animation-delay: 0.6s;
}

/* Minimalist Hover Style (Admin Preview) */
.minimalist-hover .modern-book-info {
	display: none !important;
}

.minimalist-hover .nordic-book {
	border-radius: 0.75rem;
	overflow: hidden;
}

.minimalist-hover .nordic-book:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12) !important;
}

.minimalist-hover .nordic-book:hover .modern-book-cover img {
	filter: brightness(1.05);
}

.minimalist-hover .modern-book:hover {
	transform: none;
	box-shadow: none;
}

.minimalist-hover .modern-book:hover .modern-book-cover img {
	transform: scale(1.05);
	filter: brightness(1.05);
}

.minimalist-hover .nordic-book-cover {
	border-radius: 0.75rem 0.75rem 0 0;
}

.minimalist-hover .card-body {
	padding: 0.75rem !important;
}

[data-bs-theme="dark"] .minimalist-hover .nordic-book:hover {
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4) !important;
}

/* Dark mode styles */
[data-bs-theme="dark"] {
	--bs-body-bg: #212529;
	--bs-body-color: #f8f9fa;
}

[data-bs-theme="dark"] .navbar.bg-white {
	background-color: #212529 !important;
}

[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.55);
}

[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:focus {
	color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link.active {
	color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .dropdown-menu {
	background-color: #343a40;
	border-color: #495057;
}

[data-bs-theme="dark"] .dropdown-item {
	color: rgba(255, 255, 255, 0.55);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
	background-color: #495057;
	color: #fff;
}

#theme-toggle {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

#theme-toggle:hover {
	opacity: 0.8;
}

#theme-toggle:focus {
	outline: none;
	box-shadow: none;
}

[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea {
	background-color: #2b3035;
	border: 1px solid #495057;
	color: #e9ecef;
}

/* Style for input focus state in dark mode */
[data-bs-theme="dark"] input[type="text"]:focus,
[data-bs-theme="dark"] input[type="number"]:focus,
[data-bs-theme="dark"] input[type="email"]:focus,
[data-bs-theme="dark"] input[type="password"]:focus,
[data-bs-theme="dark"] input[type="search"]:focus,
[data-bs-theme="dark"] select:focus,
[data-bs-theme="dark"] textarea:focus {
	background-color: #343a40;
	border-color: #0d6efd;
	color: #fff;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Style for disabled inputs in dark mode */
[data-bs-theme="dark"] input:disabled,
[data-bs-theme="dark"] select:disabled,
[data-bs-theme="dark"] textarea:disabled {
	background-color: #343a40;
	color: #6c757d;
}

/* Style for input placeholders in dark mode */
[data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
	color: #6c757d;
}

/* Remove spinner buttons from number inputs in dark mode */
[data-bs-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-bs-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Specific styles for the quantity input with class 'number' */
[data-bs-theme="dark"] input.number {
	background-color: #2b3035;
	color: #e9ecef;
	border: 1px solid #495057;
	padding: 0.375rem 0.75rem;
	border-radius: 0.25rem;
}

[data-bs-theme="dark"] input.number:focus {
	background-color: #343a40;
	border-color: #0d6efd;
	color: #fff;
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Footer dark mode styles */
[data-bs-theme="dark"] .footer-details {
	color: rgba(255, 255, 255, 0.85);
}

/* Footer links in dark mode */
[data-bs-theme="dark"] .footer-details a {
	color: rgba(255, 255, 255, 0.65);
	transition: color 0.2s ease-in-out;
}

[data-bs-theme="dark"] .footer-details a:hover {
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
}

/* Section headings in dark mode */
[data-bs-theme="dark"] .footer-details .fs-6 {
	color: rgba(255, 255, 255, 0.95);
	font-weight: 500;
}

/* Icons in footer for dark mode */
[data-bs-theme="dark"] .footer-details i {
	color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .footer-details i:hover {
	color: rgba(255, 255, 255, 0.95);
}

/* Online chat button in dark mode */
[data-bs-theme="dark"] .footer-details .btn-light {
	background-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .footer-details .btn-light:hover {
	background-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.95);
}

/* Footer logo section in dark mode */
[data-bs-theme="dark"] .footer-logo {
	color: rgba(255, 255, 255, 0.85);
}

/* Copyright text and made with love section */
[data-bs-theme="dark"] .footer-logo p {
	color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .footer-logo .fa-heart {
	color: #ff4136;
}

/* Images in dark mode footer */
[data-bs-theme="dark"] .footer-details img {
	filter: brightness(0.8) contrast(1.2);
	opacity: 0.9;
}

/* Payment method icons specific styles */
[data-bs-theme="dark"] .footer-details .fab {
	color: rgba(255, 255, 255, 0.85);
}

/* Language selector in dark mode */
[data-bs-theme="dark"] .footer-details .changeLang {
	color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .footer-details .changeLang:hover {
	color: rgba(255, 255, 255, 0.95);
}

/* Working hours and contact info in dark mode */
[data-bs-theme="dark"] .footer-details .my-2 {
	color: rgba(255, 255, 255, 0.65);
}

/* Separators and borders if any */
[data-bs-theme="dark"] .footer-details .border-top,
[data-bs-theme="dark"] .footer-details .border-bottom {
	border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Logo in nav and footer */
[data-bs-theme="dark"] .navbar-brand img,
[data-bs-theme="dark"] .footer-details img,
[data-bs-theme="dark"] .payment img,
[data-bs-theme="dark"] body.home .gap-4 img:not(:last-child),
[data-bs-theme="dark"] body.orders #subwidsdisplay img[alt="Econt"] {
	filter: brightness(0) invert(1);
}

/* Nav tabs dark mode styles */
[data-bs-theme="dark"] .nav-tabs {
	border-bottom-color: #495057;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
	color: rgba(255, 255, 255, 0.75);
	background-color: transparent;
	border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
	color: rgba(255, 255, 255, 0.9);
	border-color: #495057 #495057 transparent;
	isolation: isolate;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
	color: #fff;
	background-color: #212529;
	border-color: #495057 #495057 #212529;
}

/* Icon colors in dark mode */
[data-bs-theme="dark"] .nav-tabs .nav-link i {
	color: inherit;
}

/* Ensure text is visible when tab is disabled */
[data-bs-theme="dark"] .nav-tabs .nav-link.disabled {
	color: rgba(255, 255, 255, 0.5);
	background-color: transparent;
	border-color: transparent;
}

/* Focus state styles */
[data-bs-theme="dark"] .nav-tabs .nav-link:focus {
	border-color: #495057 #495057 transparent;
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Active tab focus state */
[data-bs-theme="dark"] .nav-tabs .nav-link.active:focus {
	border-color: #495057 #495057 #212529;
}

/* Mobile sticky buy button */
.mobile-sticky-buy {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	padding: 0.75rem 1rem;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767.98px) {
	.mobile-sticky-buy {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.mobile-sticky-buy .mobile-sticky-price {
		text-align: center;
	}

	.mobile-sticky-buy .mobile-buy-btn {
		width: 100%;
	}

	/* Add padding to body so content isn't hidden behind sticky bar */
	body.store {
		padding-bottom: 100px;
	}

	/* Lift cookie consent toast above mobile sticky buy button on book pages */
	body.store .toast-container {
		bottom: 110px !important;
	}
}
body.izdavam .faq-wrapper {
	--faq-accent: var(--iz-teal);
	--faq-accent-rgb: 0, 138, 138;
	--faq-accent-hover: var(--iz-teal-dark);
}
body.services .faq-wrapper {
	--faq-accent: #e76d00;
	--faq-accent-rgb: 231, 109, 0;
	--faq-accent-hover: #c25c00;
}
body.home .faq-wrapper {
	--faq-accent: var(--iz-blue);
	--faq-accent-rgb: 0, 107, 152;
	--faq-accent-hover: #005577;
}
body.store .faq-wrapper {
	--faq-accent: var(--iz-green);
	--faq-accent-rgb: 60, 118, 61;
	--faq-accent-hover: #2c5c2d;
}

/* Apply the accent to Bootstrap link vars (used by anchors in answers) */
.faq-wrapper {
	--faq-accent: var(--iz-teal);
	--faq-accent-rgb: 0, 138, 138;
	--faq-accent-hover: var(--iz-teal-dark);
	--bs-link-color: var(--faq-accent);
	--bs-link-color-rgb: var(--faq-accent-rgb);
	--bs-link-hover-color: var(--faq-accent-hover);
}

/* Inactive pill tabs — accent text + subtle accent hover bg.
   `!important` is needed to beat the legacy `body.services .nav-item .active`
   rule which forces `background-color: inherit !important` site-wide. */
.faq-wrapper .nav-pills .nav-link {
	color: var(--faq-accent) !important;
}
.faq-wrapper .nav-pills .nav-link:hover {
	background-color: rgba(var(--faq-accent-rgb), 0.08) !important;
}
.faq-wrapper .nav-pills .nav-link.active,
.faq-wrapper .nav-pills .show > .nav-link {
	background-color: var(--faq-accent) !important;
	color: #fff !important;
}

/* Reset legacy `body.services .tab-content` (orange bg + float:left) which
   only existed for an unused services layout and now hijacks our Bootstrap
   tabs container. Scoped so nothing else changes. */
.faq-wrapper .tab-content {
	background: transparent !important;
	float: none !important;
	margin: 0 !important;
	width: 100%;
}

/* Same story for `body.services h2 { color: brown }` — keep our heading in
   the body text colour so it reads on both light and dark themes. */
.faq-wrapper h2,
.faq-wrapper h3 {
	color: inherit !important;
	font-weight: 700;
}

/* Accordion — teal active state and a chevron that adapts to theme.
   Bootstrap 5.3 redefines the icon variables on `.accordion-button::after`
   directly, so we mirror the publish-page pattern and override at that
   level too. */
.faq-wrapper .accordion {
	--bs-accordion-active-color: #fff;
	--bs-accordion-active-bg: var(--faq-accent);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--faq-accent-rgb), 0.25);
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
/* Hide the tabs scrollbar visually but keep it scrollable */
.faq-wrapper .faq-tabs-wrap {
	scrollbar-width: thin;
}

/* ---------------------------------------------------------------------------
   Profile area accent (whole `body.profile`, every page of the Profile module)
   Recolours Bootstrap "primary" utilities to the profile magenta accent
   (#ff00ca) so text-primary, bg-primary, btn-outline-primary, links etc. all
   blend with the rest of the profile area instead of being default blue.
   This is deliberately NOT scoped to a per-page wrapper class any more: any
   new button / badge / heading added anywhere under /profile now inherits the
   section accent automatically, without remembering to opt in.
   Semantic utilities (danger / success / warning / info) are intentionally
   left alone — they convey meaning, not branding.
   --------------------------------------------------------------------------- */

body.profile {
	--bs-primary: var(--iz-pink);
	--bs-primary-rgb: 255, 0, 202;
	--bs-primary-text-emphasis: var(--iz-pink);
	--bs-primary-bg-subtle: #ffe5f7;
	--bs-primary-border-subtle: #ffb3e7;
	--bs-link-color: var(--iz-pink);
	--bs-link-color-rgb: 255, 0, 202;
	--bs-link-hover-color: #cc00a2;
	--bs-link-hover-color-rgb: 204, 0, 162;
}

/* Bootstrap 5.3 sets text-primary via --bs-primary-text-emphasis but in dark
   mode it switches to a lighter tint. Force our accent in both modes. */
[data-bs-theme="light"] body.profile .text-primary,
[data-bs-theme="dark"] body.profile .text-primary,
[data-bs-theme="light"] body.profile .text-primary-emphasis,
[data-bs-theme="dark"] body.profile .text-primary-emphasis {
	color: var(--iz-pink) !important;
}

/* Tint badge & alert subtle backgrounds (bg-primary-subtle, bg-info-subtle) to magenta */
body.profile .profile-books-page .bg-primary-subtle,
body.profile .profile-books-page .bg-info-subtle {
	background-color: #ffe5f7 !important;
}
body.profile .profile-books-page .text-info-emphasis {
	color: var(--iz-pink) !important;
}

/* Convert warning (yellow) badges/alerts to default text/body color */
body.profile .profile-books-page .bg-warning-subtle {
	background-color: var(--bs-tertiary-bg) !important;
}
body.profile .profile-books-page .text-warning-emphasis {
	color: var(--bs-body-color) !important;
}
body.profile .profile-books-page .alert-warning {
	--bs-alert-color: var(--bs-body-color);
	--bs-alert-bg: var(--bs-tertiary-bg);
	--bs-alert-border-color: var(--bs-border-color);
}
body.profile .profile-books-page .alert-info {
	--bs-alert-color: var(--iz-pink);
	--bs-alert-bg: #ffe5f7;
	--bs-alert-border-color: #ffb3e7;
}

/* btn-primary / btn-outline-primary in Bootstrap reference --bs-btn-*-bg
   variables that are NOT derived from --bs-primary alone. Spell them out. */
body.profile .btn-primary {
	--bs-btn-bg: var(--iz-pink);
	--bs-btn-border-color: var(--iz-pink);
	--bs-btn-hover-bg: #cc00a2;
	--bs-btn-hover-border-color: #b80092;
	--bs-btn-active-bg: #b80092;
	--bs-btn-active-border-color: #a50083;
	--bs-btn-focus-shadow-rgb: 255, 0, 202;
}
body.profile .btn-outline-primary {
	--bs-btn-color: var(--iz-pink);
	--bs-btn-border-color: var(--iz-pink);
	--bs-btn-hover-bg: var(--iz-pink);
	--bs-btn-hover-border-color: var(--iz-pink);
	--bs-btn-active-bg: #cc00a2;
	--bs-btn-active-border-color: #cc00a2;
	--bs-btn-focus-shadow-rgb: 255, 0, 202;
}

/* Books page: all badges should be neutral (no colored backgrounds/text).
   Override prior subtle-bg + emphasis-text rules with a single neutral chip. */
body.profile .profile-books-page .badge {
	background-color: var(--bs-tertiary-bg) !important;
	color: var(--bs-body-color) !important;
	font-weight: 500;
}
body.profile .profile-books-page .badge i {
	color: var(--bs-body-color) !important;
}

/* Badges / step number circles — bg-primary is a class on those */
body.profile .bg-primary {
	background-color: var(--iz-pink) !important;
}
body.profile .border-primary {
	border-color: var(--iz-pink) !important;
}
/* Focus ring on inputs / checkboxes / switches — Bootstrap's default is blue */
body.profile .form-control:focus,
body.profile .form-select:focus,
body.profile .form-check-input:focus {
	border-color: #ffb3e7;
	box-shadow: 0 0 0 0.25rem rgba(255, 0, 202, 0.25);
}
body.profile .form-check-input:checked {
	background-color: var(--iz-pink);
	border-color: var(--iz-pink);
}

/* Reusable utility classes that replace one-off inline styles from the form */
body.profile .publish-form-page .step-number {
	width: 2.188rem;
	height: 2.188rem;
}
body.profile .publish-form-page .book-cover-thumb {
	width: 3.75rem;
	height: 5rem;
	object-fit: cover;
	border-radius: 0.5rem;
}
/* Profit-preference options: lay each radio + its multi-line label out as a
   flex row so the radio stays top-aligned and the label wraps cleanly on narrow
   columns. Notes on the two gotchas this avoids:
   - width:100% is required — without it the flex row collapses to zero width
     because of the <fieldset> min-content sizing quirk.
   - float:none/position:static must be forced on the radio: a CHECKED radio
     otherwise kept Bootstrap's float and was flung to the right edge, while
     unchecked ones stayed put (the original "breaking" symptom on mobile).
   The conditional amount/price input wraps onto its own full-width line. */
body.profile .publish-form-page .profit-preference-options .form-check {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 0.75rem;
	padding-left: 0;
}
body.profile .publish-form-page .profit-radio.form-check-input {
	float: none;
	position: static;
	flex: 0 0 auto;
	margin: 0.2rem 0 0 0;
}
body.profile .publish-form-page .profit-preference-options .form-check-label {
	flex: 1 1 0;
	min-width: 0;
}
body.profile .publish-form-page .profit-amount-input,
body.profile .publish-form-page .profit-price-input {
	flex-basis: 100%;
	/* padding (not margin) keeps the indent inside the 100% basis under
	   border-box, so it can never push the row past the viewport. */
	padding-left: 1.75rem;
}
body.profile .publish-form-page .help-text-muted {
	color: var(--bs-secondary-color, #6c757d) !important;
	font-size: 0.875rem;
}
body.profile .publish-form-page .min-w-0 {
	min-width: 0;
}

/* Bootstrap 5.3 hardcodes #0d6efd on form-check checked + form-control/select
   focus rings (not via --bs-primary), so the --bs-primary override above does
   not reach them. Spell them out so the form blends into the profile palette. */
body.profile .publish-form-page .form-check-input:checked {
	background-color: var(--iz-pink);
	border-color: var(--iz-pink);
}
body.profile .publish-form-page .form-check-input:focus {
	border-color: var(--iz-pink);
	box-shadow: 0 0 0 0.25rem rgba(255, 0, 202, 0.25);
}
body.profile .publish-form-page .form-control:focus,
body.profile .publish-form-page .form-select:focus {
	border-color: #ff8be4;
	box-shadow: 0 0 0 0.25rem rgba(255, 0, 202, 0.25);
}
body.profile .publish-form-page .progress-bar {
	background-color: var(--iz-pink);
}

/* ---------------------------------------------------------------------------
   Publishing form — mobile optimisation (xs screens).
   Reclaims horizontal space, tightens card chrome and enlarges tap targets so
   the long form is comfortable on a phone. All scoped to .publish-form-page.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	/* NOTE: do NOT zero the .container-fluid (.publish-form-page) side padding —
	   Bootstrap's .row has -12px side margins that this padding cancels. Removing
	   it makes the row spill past the viewport and creates a horizontal scroll. */
	/* Tighter card padding gives fields more room. */
	body.profile .publish-form-page .card-body {
		padding: 1rem 0.875rem;
	}
	body.profile .publish-form-page .card-header {
		padding-left: 0.875rem;
		padding-right: 0.875rem;
	}
	/* Section titles slightly smaller so the count badge stays on the same row. */
	body.profile .publish-form-page .card-header h5 {
		font-size: 1.05rem;
	}
	/* Compact header cover thumbnail. */
	body.profile .publish-form-page .book-cover-thumb {
		width: 3rem;
		height: 4rem;
	}
	/* Help "step" number circles a touch smaller. */
	body.profile .publish-form-page .step-number {
		width: 1.875rem;
		height: 1.875rem;
	}
	/* Thumb-friendly radio / checkbox targets. */
	body.profile .publish-form-page .form-check-input {
		width: 1.35rem;
		height: 1.35rem;
	}
	body.profile .publish-form-page .form-check-label {
		font-size: 0.95rem;
	}
	/* Keep inputs at 16px so iOS doesn't zoom on focus, comfortable height. */
	body.profile .publish-form-page .form-control,
	body.profile .publish-form-page .form-select {
		font-size: 1rem;
		min-height: 2.75rem;
	}
}

/* Publish form: section headers double as collapse toggles. Once the form is
   100% complete the finished sections fold away so the file-upload card — the
   only thing still being worked on — sits near the top instead of below a long
   scroll. The chevron flips via a class swap in publishform.js. */
body.profile .publish-form-page .section-toggle {
	cursor: pointer;
}
body.profile .publish-form-page .section-toggle:hover {
	background-color: rgba(var(--bs-primary-rgb), 0.04);
}

/* Book covers (BookshopIndexModul::ModernBookCover): a 3D book standing on a wooden
   shelf, no shadows. .cover-3d holds the spine (the cover's main colour, title and
   author), the pages and the front with the badges on it, so they move with the book.
   Every cover sits in one portrait frame, so a landscape cover no longer makes its
   card shorter than the rest of the row. Hover turns the book to show its spine and
   lifts it; a click draws it out before the book opens (site.js). */
html .nordic-book.card:has(.cover-shelf),
html .nordic-book.card:has(.cover-shelf):hover {
	box-shadow: none !important;
	transform: none;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.nordic-book:has(.cover-shelf) .nordic-book-cover {
	border-radius: 0;
	overflow: visible;
}

.nordic-book:has(.cover-shelf) .card-body {
	padding: 0.75rem 0 0 !important;
	background: transparent;
}

.cover-shelf .modern-book,
.cover-shelf .modern-book:hover {
	transform: none;
	box-shadow: none;
}

.cover-shelf .modern-book-cover {
	aspect-ratio: 200 / 283;
	height: auto;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	perspective: 900px;
}

/* The shelf: a wooden ledge under each frame, wide enough to meet its neighbours'. */
.cover-shelf .modern-book-cover::after {
	content: "";
	position: absolute;
	left: -0.875rem;
	right: -0.875rem;
	bottom: -0.375rem;
	height: 0.375rem;
	background: linear-gradient(#c8a97f, #a88a62);
	border-radius: 1px;
}

[data-bs-theme="dark"] .cover-shelf .modern-book-cover::after {
	background: linear-gradient(#6f5a42, #54432f);
}

.cover-3d {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a:hover .cover-3d {
	transform: translateY(-0.5rem) rotateY(40deg);
}

.cover-3d.is-opening {
	transform: translateY(-0.75rem) translateZ(5rem) rotateY(0deg);
	transition-duration: 0.4s;
}

.cover-front {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
}

.cover-shelf .modern-book .modern-book-cover .cover-front img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 1px 3px 3px 1px;
	transform: none;
	filter: none;
}

.cover-spine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1.125rem;
	width: 1.125rem;
	transform-origin: right center;
	transform: rotateY(-90deg);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.12) 45%, rgba(0, 0, 0, 0.12)), var(--spine);
	color: var(--spine-ink);
	border-radius: 2px 0 0 2px;
	overflow: hidden;
	pointer-events: none;
}

.cover-spine-text {
	display: block;
	height: 100%;
	padding: 0.5rem 0;
	writing-mode: vertical-rl;
	font-size: 0.5625rem;
	line-height: 1.125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.cover-spine-text b {
	font-weight: 600;
	margin-bottom: 0.5em;
}

.cover-pages {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 100%;
	width: 0.75rem;
	transform-origin: left center;
	transform: rotateY(90deg);
	background: repeating-linear-gradient(90deg, #f6f1e6 0 1px, #d8d0bf 1px 2px);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.cover-3d {
		transition: none;
	}
}