/*
 * find.youropia.gr - mobile / tablet layout (step 13)
 * Loaded AFTER youropia-site.css. Desktop (wider than 1000px) is not affected:
 * every rule is inside a media query.
 */

/* Elements added by scripts/fy-mobile.js: hidden on desktop */
.fy-mobile-only {display: none;}

@media (max-width: 1000px) {

	html {-webkit-text-size-adjust: 100%;}
	img {max-width: 100%;height: auto;}

	/* --- page width: fluid instead of 970px --- */
	#wrapper,
	#footer .wrapper,
	#leading #leading-inner,
	#menu #menu-inner,
	#page #page-inner {width: auto;padding-left: 12px;padding-right: 12px;}
	.fy-banner {padding: 0 12px;}

	/* --- top bar --- */
	#leading #leading-links li:nth-child(n+2) {display: none;}

	/* --- header --- */
	#wrapper #header {padding-top: 10px;margin-bottom: 20px;}
	#header #search {margin-top: 10px;}
	#header #search #search-menu #menu-left {width: auto;}
	#header #search #search-box {padding: 12px;}
	#header #search #search-box .what,
	#header #search #search-box .where {display: none;}
	#header #search #search-box .field {float: none;margin-bottom: 8px;}
	#header #search #search-box .search-what,
	#header #search #search-box .search-where {width: 100%;}
	#header #search #search-box input[type="text"] {width: 100%;box-sizing: border-box;}
	#header #search #search-box #search-button {float: none;width: 100%;}

	/* --- breadcrumbs: one line, scroll sideways if long --- */
	#crumbs-container {overflow-x: auto;}
	#crumbs {white-space: nowrap;}
	#crumbs li {float: none;display: inline-block;}

	/* --- generic two-column blocks of the content -> one column --- */
	#content > .left,
	#content > .right {float: none;width: auto;min-width: 0;}

	/* --- home page --- */
	#content #homepage-categories,
	#content #homepage-az-search {float: none;width: auto;margin: 0 0 20px 0;}
	#content #homepage-categories {background-image: none !important;}
	#content #homepage-categories .left,
	#content #homepage-categories .right {float: none;width: auto;}
	#content #homepage-categories .right ul {float: none;width: auto;margin: 0 !important;}

	/* --- search results: one column (filters and map open with the buttons of fy-mobile.js) --- */
	#dir-filters,
	#dir-results,
	#dir-sidebar {float: none;width: auto;margin: 0 0 15px 0;}
	#dir-results #dir-results-order .select-box {width: auto;max-width: 240px;}
	#dir-sidebar #map-container #map-canvas {width: 100%;}
	body.fy-mobile #dir-filters {display: none;}
	body.fy-mobile #dir-filters.fy-open {display: block;}
	body.fy-mobile #dir-sidebar #map-container {display: none;}
	body.fy-mobile .fy-map-slot #map-container {display: block;margin-bottom: 15px;}
	body.fy-mobile .fy-map-slot #map-canvas {height: 300px;}
	.dir-filter .popover {max-width: 90vw !important;}
	.dir-filter-more-list {min-width: 0;}

	/* --- business page --- */
	#profile-main,
	#profile-sidebar {float: none;width: auto;}
	#profile-sidebar {margin-top: 20px;}
	#profile-sidebar #profile-map-container #map-canvas {width: 100%;height: 240px;}
	#profile-main #profile-info #profile-logo {max-width: 40%;}
	#profile-hours ul span.day {width: 90px;}
	#profile-review-form #review-field-notify-me label {float: none;white-space: normal;padding-right: 0;}

	/* --- header of the static pages (plans, FAQ, contact, terms) --- */
	#menu #menu-inner > .left,
	#menu #menu-inner > .right {float: none;}
	#menu ul {top: 0;margin-top: 10px;display: flex;flex-wrap: wrap;}
	#menu ul li {float: none;padding: 6px 12px 6px 0;}
	#menu ul li a {font-size: 15px;}
	#page {height: auto;min-height: 60px;margin-bottom: 20px;}
	#page #page-inner #page-title {line-height: 1.3;font-size: 24px;padding: 16px 0;}

	/* --- terms / FAQ: the menu above the text (the columns had fixed widths) --- */
	#terms-page > .left,
	#terms-page > .right,
	#faq-page > .left,
	#faq-page > .right {float: none;width: auto !important;}
	#terms-page > .left,
	#faq-page > .left {margin-bottom: 20px;}

	/* --- ad.youropia.gr banner in the search sidebar: centred --- */
	#dir-sidebar #banner-ad {text-align: center;margin: 0 auto 15px;}
	#dir-sidebar #banner-ad img {display: inline-block;}
	#dir-sidebar #dir-sidebar-ads {text-align: center;}

	/* --- static pages: plans, contact --- */
	#profile-start {margin-top: 0;text-align: left;}
	#profile-start .col {display: block;width: auto;max-width: 420px;margin: 20px auto 0;position: static !important;left: auto !important;right: auto !important;}
	#profile-start .col .col-inner {min-height: 0;}
	#contact-page .left,
	#contact-page .right {float: none;width: auto !important;}
	#contact-page p {margin: 12px 0;font-size: 16px;word-break: break-word;}
	#contact-page #contact-form input,
	#contact-page #contact-form textarea,
	#contact-page #contact-form #contact-form-telephone,
	#contact-page #contact-form #contact-form-message {width: 100% !important;max-width: 100%;box-sizing: border-box;}

	/* --- footer --- */
	#footer-popular-search-terms ul {width: 45%;margin: 0 5% 10px 0;}
	.nobg #footer .left {float: none;max-width: none;}
	#footer #footer-links li {display: inline-block;margin-bottom: 6px;}

	/* --- toolbar of the search page (fy-mobile.js) --- */
	.fy-mobile-only {display: block;}
	.fy-toolbar {display: flex;gap: 8px;margin: 0 0 12px 0;}
	.fy-toolbar .btn {flex: 1;text-align: center;padding: 9px 6px;font-size: 14px;}
	.fy-toolbar .btn.fy-active {background: #FDB913;border-color: #E29C31;color: #222;}
}

@media (max-width: 640px) {

	body {font-size: 15px;}

	/* top bar: only the date */
	#leading #leading-social-media {display: none;}

	/* header: smaller logo, compact button */
	#header #logo #search-logo img,
	#menu #logo #search-logo img {width: 150px;}
	#header #logo #free-listing-button {margin-top: 12px;transform: scale(0.85);transform-origin: right top;}

	/* home: categories as horizontal "chips" */
	#content #homepage-categories .left {padding: 6px;border-right: none;border-bottom: 1px solid #ddd;min-height: 0;}
	#content #homepage-categories .left > ul {display: flex;overflow-x: auto;-webkit-overflow-scrolling: touch;gap: 6px;padding-bottom: 9px;}
	#content #homepage-categories .left > ul > li {flex: 0 0 auto;}
	#content #homepage-categories .left ul li a {min-width: 0;border: 1px solid #ddd !important;border-radius: 16px !important;padding: 7px 12px;white-space: nowrap;}
	#content #homepage-categories .left ul li span.category-icon {display: none;}
	#content #homepage-categories .right {padding: 12px;}
	#content #homepage-categories .right ul li {line-height: 30px;}
	#content #homepage-az-search #az-search-table-wrapper #az-search-table td a {width: auto;padding: 4px 0;font-size: 14px;}

	/* results */
	#dir-results #dir-results-list .list-item .profile-logo {max-width: 35%;}
	#dir-results #dir-results-order label {display: none;}

	/* bigger touch targets */
	.pagination a {padding: 0 14px;line-height: 40px;}

	/* business page: room for the fixed bar at the bottom */
	body.fy-has-actionbar {padding-bottom: 64px;}
	.fy-actionbar {position: fixed;left: 0;right: 0;bottom: 0;z-index: 1000;display: flex;gap: 8px;padding: 8px 10px;background: #fff;border-top: 1px solid #ddd;box-shadow: 0 -2px 6px rgba(0,0,0,0.08);}
	.fy-actionbar a {flex: 1;display: block;text-align: center;padding: 11px 6px;border-radius: 4px;font-size: 16px;font-weight: 600;text-decoration: none !important;}
	.fy-actionbar a.fy-call {background: #FDB913;color: #222;}
	.fy-actionbar a.fy-directions {background: #f2f2f2;color: #333;border: 1px solid #ccc;}
	.fy-actionbar a .fa {margin-right: 6px;}

	/* footer: one column of links */
	#footer-popular-search-terms ul {width: 100%;margin: 0 0 10px 0;}
}

/* the bar exists only on phones */
@media (min-width: 641px) {
	.fy-actionbar {display: none !important;}
}