/* ==========================================================================
   MUNDI CZARTER – responsive overrides
   Ładowane po style.css, używa !important tam gdzie trzeba nadpisać sztywne
   szerokości / pozycjonowanie absolutne z oryginalnego stylu.
   Breakpoints:
     - 1000px  : tablety landscape / small desktop
     - 760px   : tablet portrait + telefony
   ========================================================================== */

/* --- Uniwersalne reguły dla wszystkich ekranów --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Obrazy skalują się proporcjonalnie – nie wychodzą poza kontener */
img { max-width: 100%; height: auto; }
/* Wyjątek dla logo w headerze (ma swoje pozycjonowanie absolute) */
img.logo { max-width: none; }
/* Wyjątek dla #normalheader – ma sztywną wysokość i absolute, inaczej się rozjedzie */
img#normalheader { max-width: 100%; }

/* Długie słowa / URLe / adresy email – zawijaj, nie wyjeżdżaj poza kontener.
   To rozwiązuje „rozjeżdżanie się" tekstu (np. długi link w opisie jachtu). */
p, li, td, th, h1, h2, h3, h4, h5, h6,
.desc, #hcontent, #content, .main-text {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
}

/* Hamburger button – domyślnie ukryty, pokazuje się tylko na mobile */
#menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	font-family: inherit;
}

/* ==========================================================================
   TABLET / SMALL DESKTOP (<=1000px)
   Główny krok: skalowanie szerokości kontenerów z 980px do 100%.
   ========================================================================== */
@media (max-width: 1000px) {
	div.wrapper,
	div#mdata,
	div#footer div#fcontent,
	div#footer div#fcontent div#fbox div.content {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Lista jachtów – główny wrapper (yachts page + yachtview) */
	div#yachts {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Content split 605+325 – ściskamy proporcjonalnie */
	div#content div#left  { width: calc(65% - 30px) !important; }
	div#content div#right { width: 32% !important; margin-left: 1% !important; }
	div#content div#right div#contact,
	div#content div#right div#ports,
	div#content div#right div#lm,
	div#right div#weather { width: calc(100% - 20px) !important; box-sizing: border-box; }
}

/* ==========================================================================
   TELEFONY + TABLETY PORTRAIT (<=760px)
   Pełny mobile layout: stackowanie elementów, hamburger menu,
   ukrywanie dekoracji, kolumny -> 100%.
   ========================================================================== */
@media (max-width: 760px) {

	/* === BODY / GŁÓWNE KONTENERY === */
	body { font-size: 15px; }
	.sub div#content { padding: 15px 10px !important; margin-top: 0 !important; }

	div.wrapper,
	div#mdata,
	div#yachts,
	div#footer div#fcontent,
	div#footer div#fcontent div#fbox div.content {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* === HEADER (logo + telefon + email + login) === */
	div.wrapper.topcontent,
	div.topcontent {
		height: auto !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/* Logo na środku, nie absolute */
	img.logo {
		position: static !important;
		display: block !important;
		height: 50px !important;
		width: auto !important;
		margin: 5px auto !important;
	}

	/* Ozdoba "fale" – ukryj na mobile */
	img.before { display: none !important; }

	/* Napis "mundiczarter.pl" obok logo – pod logo, wycentrowany */
	div#texttitle {
		position: static !important;
		text-align: center !important;
		margin: 0 0 10px 0 !important;
	}
	div#texttitle p#title { margin: 0 !important; }
	div#texttitle p#title a {
		position: static !important;
		float: none !important;
		left: 0 !important;
		display: inline-block !important;
		line-height: 1.2 !important;
		font-size: 18px !important;
	}

	/* Bloki kontaktowe – poziome, wycentrowane, zawijają się */
	div.block {
		float: none !important;
		display: inline-block !important;
		vertical-align: middle;
		text-align: center;
		margin: 0 5px !important;
		line-height: 2.2 !important;
		font-size: 14px !important;
	}
	div.block.phone,
	div.block.mail,
	div.block.loginout,
	div.block.user {
		width: auto !important;
		display: inline-block !important;
		margin: 0 8px !important;
	}
	/* Gradienty / nakładki graficzne "cutted" rozjeżdżają się na mobile */
	div.block img.cutted { display: none !important; }

	div.block a {
		float: none !important;
		line-height: normal !important;
		display: inline-block;
	}
	div.block.loginout a {
		line-height: 2.2 !important;
		padding-right: 0 !important;
	}
	div.block.loginout a img,
	div.block.user img {
		position: static !important;
		display: inline-block !important;
		vertical-align: middle;
		height: 14px !important;
		margin-right: 3px;
	}
	#phone, #mail {
		font-size: 15px !important;
		color: #000 !important;
	}

	/* Kontener z blokami kontaktowymi – wycentruj zawartość */
	div.wrapper.topcontent { text-align: center; }

	/* === MENU – hamburger === */
	div#menu {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		background: #1460b4 !important;
		float: none !important;
	}
	div#mdata { width: 100% !important; }
	div#menu div.menucontent {
		float: none !important;
		height: auto !important;
		width: 100% !important;
	}

	#menu-toggle {
		display: block !important;
		width: 100% !important;
		background: #1460b4 !important;
		color: #fff !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		padding: 14px 15px !important;
		text-align: left !important;
		letter-spacing: 1px;
		box-sizing: border-box;
		border-top: 1px solid #34c3e4;
		border-bottom: 1px solid #0a3a6b;
	}

	/* Menu ukryte domyślnie – pokazuje się dopiero po kliknięciu hamburger */
	div#menu ul {
		display: none !important;
		height: auto !important;
		background: #0f4e91;
		width: 100%;
	}
	div#menu.is-open ul { display: block !important; }
	div#menu ul li {
		float: none !important;
		display: block !important;
		border-top: 1px solid #0a3a6b;
	}
	/* Usuń dekoracyjne ::before / ::after na krawędziach menu (pionowe paseczki) */
	div#menu ul li:first-child::before,
	div#menu ul li:last-child::after { display: none !important; }

	div#menu ul li a {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		border: none !important;
		padding: 14px 15px !important;
		line-height: 1.3 !important;
		height: auto !important;
		font-size: 14px !important;
		text-align: left !important;
	}
	div#menu ul li.active a {
		background: #fff !important;
		color: #000 !important;
	}

	/* Tekst na mobile: justify powoduje ogromne przerwy – ustaw left */
	p, #left p, #content p, div.desc { text-align: left !important; }

	/* === HERO PHOTO (strona główna) === */
	div#photo {
		position: static !important;
	}
	div#photo img {
		margin-top: 0 !important;
		display: block;
		width: 100% !important;
	}
	/* .main-text ma position:absolute z procentowymi pozycjami – na mobile zbija się
	   nad obrazek i jest nieczytelny. Przenosimy pod zdjęcie, na czarnym pasku. */
	div#photo .main-text,
	div.main-text {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		left: auto !important;
		top: auto !important;
		display: block !important;
		padding: 12px 15px !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
		color: #fff !important;
		background: #005789 !important;
		box-sizing: border-box;
		text-align: center !important;
	}

	/* === HEADER-MENU (4 kwadraty NASZA FLOTA, LAST MINUTE, LIFTING, CUMY) ===
	   Oryginalnie każdy <li> ma position:absolute z procentowymi pozycjami
	   i top:-100px – trzeba to WSZYSTKO zresetować. */
	div#header-menu {
		width: 100% !important;
		height: auto !important;
		padding: 0 5px !important;
		box-sizing: border-box;
		position: static !important;
	}
	div#header-menu ul {
		margin: 0 !important;
		padding: 10px 0 !important;
		list-style: none;
		overflow: hidden;
		width: 100% !important;
		position: static !important;
		display: block !important;
	}
	/* KRYTYCZNE: reset position:absolute z oryginalnego CSS */
	div#header-menu ul li,
	div#header-menu ul li:nth-child(1),
	div#header-menu ul li:nth-child(2),
	div#header-menu ul li:nth-child(3),
	div#header-menu ul li:nth-child(4) {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		margin: 0 !important;
		width: 50% !important;
		float: left !important;
		display: block !important;
		box-sizing: border-box !important;
		padding: 4px !important;
		list-style: none !important;
	}
	div#header-menu ul li:after { display: none !important; }
	div#header-menu ul li > div {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		padding: 5px !important;
		box-sizing: border-box;
	}
	div#header-menu ul li img.linkphoto {
		width: 100% !important;
		height: auto !important;
		display: block;
	}
	/* Podpisy „NASZA FLOTA", „LAST MINUTE" itd. – na mobile pod obrazkiem */
	div#header-menu ul li div a,
	div#header-menu ul li div a.lm {
		position: static !important;
		display: block !important;
		width: 100% !important;
		left: auto !important;
		top: auto !important;
		padding: 10px 5px !important;
		font-size: 14px !important;
		text-align: center !important;
		box-sizing: border-box;
		margin-top: 4px;
	}
	div#header-menu ul li div a.lm:after { display: none !important; }

	/* === CONTENT (układ 2-kolumnowy -> 1 kolumna) === */
	div#content {
		padding: 20px 10px !important;
		margin-top: 0 !important;
		position: relative;
	}
	div#content div#left,
	div#content div#right {
		width: 100% !important;
		float: none !important;
		padding: 0 !important;
		margin: 0 0 20px 0 !important;
	}
	div#content div#right div#contact,
	div#content div#right div#ports,
	div#content div#right div#lm,
	div#right div#weather {
		width: auto !important;
		box-sizing: border-box;
		float: none !important;
	}
	div#content div#left hr { margin: 15px 0; }

	/* Nagłówki – zmniejsz */
	div#content h1 { font-size: 22px !important; }
	div#content h2 { font-size: 20px !important; padding-bottom: 10px !important; }
	div#content h3 { font-size: 17px !important; }

	/* === NORMALHEADER (nagłówek na podstronach CMS/yacht) === */
	img#normalheader {
		height: 120px !important;
		margin-top: 0 !important;
		position: static !important;
		object-fit: cover;
	}

	/* === YACHTS LIST / YACHT VIEW === */
	div#yachts div#header img#extra {
		position: static !important;
		width: 100% !important;
		margin: 0 0 15px 0 !important;
		border-width: 8px !important;
		box-sizing: border-box;
	}
	div#yachts div#header div#text {
		position: static !important;
		left: 0 !important;
		width: 100% !important;
		padding: 0 !important;
	}
	div#yachts div#header div#text h2 { font-size: 18px !important; margin-left: 0 !important; }
	div#yachts div#header div#text div#hcontent {
		height: auto !important;
		padding-right: 0 !important;
		font-size: 14px !important;
	}
	div#yachts div#header div#text table#legend tr td.img { width: 25%; }
	div#yachts div#header div#text table#legend tr td.desc { width: 75%; font-size: 12px !important; }

	/* Galeria jachtu – KRYTYCZNE: #gallery miało sztywne 960px */
	div#yachts div#ygallery {
		height: auto !important;
		margin-top: 15px !important;
		padding-bottom: 15px;
		width: 100% !important;
		box-sizing: border-box;
	}
	div#yachts div#ygallery div#gallery,
	#gallery {
		width: 100% !important;
		max-width: 100% !important;
		height: 280px !important;
		box-sizing: border-box;
		margin: 0 !important;
	}
	/* Miniatury w galerii (<img style="width:40px">) mogą wychodzić poza kontener */
	div#yachts div#ygallery div#gallery img {
		max-width: 100%;
		height: auto;
	}

	/* Tabela parametrów jachtu – stackuj kolumny left/right */
	div#yachts div#yachtinfo {
		width: auto !important;
		max-width: 100% !important;
		padding: 10px !important;
		box-sizing: border-box;
	}
	div#yachts div#yachtinfo table.general,
	div#yachts div#yachtinfo table.general tbody,
	div#yachts div#yachtinfo table.general tr,
	div#yachts div#yachtinfo table.general > tbody > tr > td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	div#yachts div#yachtinfo table.general tr td.right,
	div#yachts div#yachtinfo table.general tr td.left {
		padding: 10px 0 !important;
	}
	div#yachts div#yachtinfo h4 { font-size: 16px !important; }
	/* Wewnętrzna tabelka flagi/parametry – pilnuj szerokości */
	div#yachts div#yachtinfo table.flags,
	div#yachts div#yachtinfo table.general tr td table.flags {
		width: 100% !important;
		table-layout: fixed;
	}
	div#yachts div#yachtinfo table.flags td.txt {
		font-size: 14px !important;
		white-space: normal !important;
	}

	/* Opis jachtu (.desc) – długi tekst z inline HTML może mieć szerokie obiekty */
	div#yachts div#yachtinfo p.desc,
	div#yachts div#yachtinfo .desc { word-wrap: break-word; }

	/* Treść CMS (.page_content) czasem ma <table> z inline width – ogranicz */
	div#content table { max-width: 100% !important; }
	div#content img { max-width: 100% !important; height: auto !important; }
	div#content iframe { max-width: 100% !important; }

	/* === FOOTER === */
	div#footer {
		padding-bottom: 20px;
		line-height: 1.5;
	}
	/* General wrapper rule above adds padding-left/right:10px to fcontent.
	   Override it here so div#fbox extends edge-to-edge (mobile.css intent). */
	div#footer div#fcontent {
		padding: 0 !important;
		margin: 0 !important;
	}
	div#footer div#fcontent div.fmenu {
		width: 100% !important;
		float: none !important;
		margin: 0 0 25px 0 !important;
	}
	div#footer div#fcontent div#fbox {
		position: static !important;
		height: auto !important;
		padding: 15px !important;
		box-sizing: border-box;
	}
	div#footer div#fcontent div.copy {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		background: none !important;
		position: static !important;
		text-align: center;
	}
	div#footer div#fcontent span.ftext {
		position: static !important;
		display: block;
		font-size: 11px;
		line-height: 1.4;
		padding: 8px 0;
	}
	div#footer div#fcontent .copy a {
		position: static !important;
		height: auto !important;
		display: block;
		text-align: center;
	}

	/* === POPUP MODALS (logowanie, rezerwacja, itd.) === */
	/* Szerokość / pozycjonowanie popup-body obsługuje mobile.css (flexbox).
	   Tu tylko nadpisania układu formularzy wewnątrz popupów. */

	/* Formularz logowania w popup - pola na całą szerokość */
	.popup .loginrow {
		margin-bottom: 10px;
	}
	.popup .loginrow .l {
		width: 100% !important;
		float: none !important;
		text-align: left !important;
		margin-bottom: 4px;
	}
	.popup .loginrow input[type="text"],
	.popup .loginrow input[type="password"] {
		width: 100% !important;
		box-sizing: border-box;
	}

	#edit-popup .popup-body .popup-content > div,
	#adddiary .popup-body .popup-content > div {
		width: 100% !important;
		float: none !important;
		padding-left: 0 !important;
		margin-bottom: 20px;
	}
	#adddiary .popup-content {
		max-height: calc(100vh - 80px) !important;
		overflow-y: auto !important;
	}

	/* === APPRISE (alerty) – czasami mają fixed width === */
	.apprise { width: 90% !important; max-width: 90% !important; left: 5% !important; }
	.appriseInner { width: 100% !important; box-sizing: border-box; }

	/* === WIDGET WYSZUKIWARKI (jeśli używa sztywnej szerokości) === */
	.yacht-search-widget,
	#yacht-search-widget {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Rows z datami w popup rezerwacji */
	.popup input[type="text"],
	.popup input[type="email"],
	.popup input[type="password"],
	.popup textarea {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* === KOLEJNE ELEMENTY STRONY GŁÓWNEJ === */
	.lastminute {
		width: 100% !important;
		margin: 0 0 10px 0 !important;
		height: auto !important;
		box-sizing: border-box;
	}

}

/* ==========================================================================
   LANDSCAPE TABLET / LANDSCAPE DESKTOP – popup scroll fix
   Tablety i telefony w trybie desktop obrócone poziomo mają krótki viewport
   (ok. 600–900 px wysokości). Standardowy popup z wewnętrznym max-height
   wychodzi poza ekran i nie można go przewinąć.
   Rozwiązanie: cały .popup staje się kontenerem scroll, wewnętrzne
   ograniczenia max-height są zerowane – nagłówek i treść przewijają się razem.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 900px) {
	/* .popup-body jest kontenerem scroll (ma zdefiniowaną szerokość).
	   .popup ma tylko left:50% bez width – nie może być kontenerem scroll.
	   max-height: 96vh = 100vh minus ~2vh na top:2% .popup i ~2vh margines dolny. */
	.popup .popup-body {
		max-height: 96vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}

	/* Wewnętrzny kontener treści rośnie do naturalnej wysokości –
	   scroll obsługuje .popup-body powyżej. */
	.popup .popup-content {
		max-height: none !important;
		overflow-y: visible !important;
		overflow-x: hidden !important;
	}

	/* Popup rezerwacji: nagłówek (.rform-header) jest POZA .popup-content,
	   więc bez tej poprawki scrolluje się tylko formularz, a nagłówek stoi.
	   overflow-y: auto nadpisuje overflow: hidden z base CSS – overflow-x zostaje
	   hidden, więc border-radius nadal przycina narożniki nagłówka.
	   Resetujemy też margin-bottom żeby nie tracić cennej przestrzeni w landscape. */
	.reservation-popup .popup-body {
		overflow-y: auto;
		margin-bottom: 0;
	}
	.reservation-popup .popup-content {
		max-height: none !important;
		overflow-y: visible !important;
		padding-bottom: 20px;
	}
}

/* ==========================================================================
   BARDZO MAŁE EKRANY (<=400px) – dodatkowe poprawki
   ========================================================================== */
@media (max-width: 400px) {
	/* Na bardzo małych ekranach zwijamy 4 kwadraty do 1 kolumny */
	div#header-menu ul li { width: 100% !important; }

	/* Bloki kontaktowe – 2 w rzędzie zamiast 4 */
	div.block.phone,
	div.block.mail { margin: 0 4px !important; font-size: 13px !important; }
	div.block.loginout,
	div.block.user { display: block !important; margin: 4px 0 !important; }

	div#texttitle p#title a { font-size: 16px !important; }
}

/* ==========================================================================
   TABELE DZIENNIKOW I OPINII (Moje konto) — poprawka mobile
   mobile.css wymusza min-width:560px i white-space:nowrap na wszystkich
   .acc-bookings-table w #edit-popup (zaprojektowane dla tabeli rezerwacji
   z wieloma kolumnami i scroll poziomym). Tabele dziennikow i opinii maja
   tylko 3 widoczne kolumny i nie potrzebuja min-width — bez tej poprawki
   tabela jest szersza niz popup i widac tylko srodkowa kolumne.
   responsive.css ladowane PO mobile.css — wygrywa przy rownym !important.
   Selektory z 2x ID (specificity 0200) bija regule mobile.css (ID+klasa=0110).
   ========================================================================== */
@media (max-width: 767px), (orientation: landscape) and (max-width: 960px) and (max-height: 500px) {
	#edit-popup #acc-diaries-my-tbl,
	#edit-popup #acc-diaries-other-tbl,
	#edit-popup #acc-reviews-tbl {
		min-width: 0 !important;
		width: 100% !important;
	}
	#edit-popup #acc-diaries-my-tbl th,
	#edit-popup #acc-diaries-my-tbl td,
	#edit-popup #acc-diaries-other-tbl th,
	#edit-popup #acc-diaries-other-tbl td,
	#edit-popup #acc-reviews-tbl th,
	#edit-popup #acc-reviews-tbl td {
		white-space: normal !important;
	}
	/* Przyciski i linki akcji — nie zawijaj */
	#edit-popup #acc-diaries-my-tbl td:last-child,
	#edit-popup #acc-diaries-other-tbl td:last-child,
	#edit-popup #acc-reviews-tbl td:last-child,
	#edit-popup #acc-reviews-tbl td:nth-child(4) {
		white-space: nowrap !important;
	}
}