/* Responsive fixes (2026-10-24), loaded after style.css and mobile.css from includes/head.php.
   Everything except the SMS submit label is scoped to max-width / short-landscape media queries,
   so desktop (>=1025px) is unchanged. */

/* SMS submit: real text instead of a background GIF with text-indent (all viewports) */
.smsContainer #sendSMS .submit_container input[type="submit"] {
	text-indent: 0;
	background: none transparent;
	color: #4a3b3f;
	font-family: "Raleway", sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* off-canvas menu close control (markup in includes/header.php, bound in js/main.js) */
.mainNav .closeMobile {
	display: none;
}

/* ---------- <= 1024px: tablets and phones ---------- */
@media only screen and (max-width: 1024px) {
	/* header login/register links: bigger tap target without moving anything */
	header .top .fr nav > ul > li > a {
		display: inline-block;
		padding: 8px 5px;
		margin: -8px -5px;
	}

	/* featured slider next arrow: 15px -> 24px wide */
	.featuredBox .bx-wrapper .bx-controls-direction a {
		width: 24px;
	}

	/* 11px badges / labels -> 12px */
	.itemList .item figure a .rating,
	.readerBox .profileBox .details .box.general .rateBox .labels .label {
		font-size: 12px;
	}

	.mainContainer aside .box .content .link_2 a {
		font-size: 13px;
	}
}

/* ---------- <= 820px: off-canvas nav + profile header ---------- */
@media only screen and (max-width: 820px) {
	.mainNav.open .closeMobile {
		display: block;
	}

	.mainNav .closeMobile .closeBtn {
		display: block;
		padding: 12px 20px;
		margin-bottom: 10px;
		color: #ffffff;
		font-size: 14px;
		font-weight: 700;
		text-align: right;
		text-transform: uppercase;
		cursor: pointer;
	}

	.mainNav .closeMobile .closeBtn:after {
		content: "\00d7";
		display: inline-block;
		margin-left: 8px;
		font-size: 22px;
		line-height: 14px;
		vertical-align: -2px;
	}

	/* tap outside the drawer closes it */
	.mainNav .closeMobile .backdrop {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 70%;
		right: 0;
		background: rgba(0, 0, 0, 0.35);
		cursor: pointer;
	}

	/* name + like-heart side by side without overlap. The name's flex basis is its one-line width,
	   so the like box drops under it instead of the name breaking mid-word (e.g. landscape phones 600-700px wide) */
	.readerBox .profileBox .details .box.general {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		row-gap: 10px;
	}

	.readerBox .profileBox .details .box.general .name {
		float: none;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		padding-right: 10px;
	}

	.readerBox .profileBox .details .box.general .name h1 {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.readerBox .profileBox .details .box.general .rateBox {
		float: none;
		width: auto;
		flex: 0 0 auto;
	}
}

/* ---------- <= 768px: phones + portrait tablets ---------- */
@media only screen and (max-width: 768px) {
	/* frozen 216x600 ad box under login / registration / lost-password forms */
	.mainContainer aside.asideAd {
		display: none;
	}

	/* small text */
	.footer_disclaimer {
		font-size: 13px;
		line-height: 1.4;
	}
}

/* ---------- <= 480px ---------- */
@media only screen and (max-width: 480px) {
	.readerBox .profileBox .details .box.general .name h1 {
		font-size: 24px;
	}

	.readerBox .profileBox .details .box.general .name h4 {
		font-size: 16px;
	}

	.readerBox .profileBox .details .box {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---------- landscape phones: compact header ---------- */
@media only screen and (max-height: 500px) and (orientation: landscape) and (max-width: 1024px) {
	header {
		min-height: 0;
	}

	header .top:before {
		height: 100px;
		background-size: auto 100%;
	}

	header .pageAlign::after {
		content: "";
		display: table;
		clear: both;
	}

	header .logo {
		width: 172px;
		height: 42px;
		margin-top: 12px;
		margin-bottom: 12px;
		background: url(../img/logo_m.png) 0 0 no-repeat;
	}

	header #mobileNavBtn {
		margin-top: 16px;
	}
}

/* ---------- phones in either orientation: form pages without the featured slider ----------
   Keyed to the phone's short side, so rotating a phone or tablet never crosses it. bxSlider set up
   while the box is display:none never finishes loading its lazy images and stays an empty band
   if the box is shown later (e.g. iPad portrait 768 -> landscape 1024). Tablets keep the slider. */
@media only screen and (max-width: 500px), only screen and (max-height: 500px) and (orientation: landscape) and (max-width: 1024px) {
	body.bodyPages .featuredBox {
		display: none;
	}
}

/* ---------- cookie bar (fixed, until "Strinjam se"): keep the end of the page clear of it ----------
   The footer grows by the bar's height only while the bar is shown; gaCookie.js fades it out
   (inline display:none) or removes it, and then the extra space goes away. */
@media only screen and (max-width: 1024px) {
	body:has(> #cookieAlert:not([style*="none"])) > footer {
		padding-bottom: 110px;
	}
}

@media only screen and (max-width: 820px) {
	body:has(> #cookieAlert:not([style*="none"])) > footer {
		padding-bottom: 130px;
	}
}

@media only screen and (max-width: 480px) {
	body:has(> #cookieAlert:not([style*="none"])) > footer {
		padding-bottom: 155px;
	}
}

@media only screen and (max-width: 359px) {
	body:has(> #cookieAlert:not([style*="none"])) > footer {
		padding-bottom: 195px;
	}
}