/* Yacht Fishing Abu Dhabi – app-style mobile menu + bottom bar · @author Mohammed Zaki */
.yfa-drawer, .yfa-appbar { display: none; }

@media (max-width: 900px) {
	/* old dropdown menu is replaced by the drawer */
	.yfa-nav-menu, .yfa-menu-open .yfa-nav-menu { display: none !important; }
	.yfa-head-book { display: none; }

	/* 3D burger */
	.yfa-burger { display: grid !important; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 14px;
		background: linear-gradient(145deg, #173a63, #0a1f38); box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
	.yfa-burger span { width: 18px; height: 2px; margin: 2px 0; background: #e6c48f; border-radius: 2px; }
	.yfa-burger span:nth-child(2) { width: 12px; margin-inline-start: 6px; }

	/* ---- Drawer ---- */
	.yfa-drawer { display: block; position: fixed; inset: 0; z-index: 1000000; pointer-events: none; }
	.yfa-dr-panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; color: #fff;
		padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
		display: flex; flex-direction: column;
		background:
			radial-gradient(120% 60% at 100% 0%, rgba(197,160,91,.22), transparent 60%),
			radial-gradient(90% 50% at 0% 100%, rgba(15,76,117,.55), transparent 60%),
			linear-gradient(165deg, #0d2a4b 0%, #081a30 55%, #050f1d 100%);
		clip-path: circle(0% at var(--ox, calc(100% - 40px)) var(--oy, 60px));
		transition: clip-path .55s cubic-bezier(.7,0,.2,1); }
	.yfa-dr-panel:after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 160px; opacity: .1; pointer-events: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0 12c15 0 15-8 30-8s15 8 30 8 15-8 30-8 15 8 30 8' fill='none' stroke='%23e6c48f' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x bottom / 120px 24px; }
	.yfa-dr-open { overflow: hidden; }
	.yfa-dr-open .yfa-drawer { pointer-events: auto; }
	.yfa-dr-open .yfa-dr-panel { clip-path: circle(150% at var(--ox, calc(100% - 40px)) var(--oy, 60px)); }

	.yfa-dr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
	.yfa-dr-top .yfa-logo { color: #fff; }
	.yfa-dr-close { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(230,196,143,.35); background: rgba(255,255,255,.06);
		color: #e6c48f; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
	.yfa-drawer .yfa-langs { margin: 0 0 16px; padding: 4px; gap: 6px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); align-self: flex-start; }
	.yfa-drawer .yfa-langs a { font-size: 12.5px; padding: 6px 15px; }
	.yfa-drawer .yfa-langs a.on { background: linear-gradient(135deg, #e6c48f, #b88b4a); box-shadow: 0 4px 10px rgba(197,160,91,.35); }

	.yfa-dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.yfa-tile, .yfa-dr-contact { position: relative; display: block; border-radius: 18px; padding: 14px 12px 12px; text-decoration: none; color: #fff;
		background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
		border: 1px solid rgba(255,255,255,.10);
		box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
		opacity: 0; transform: translateY(18px) scale(.96);
		transition: transform .5s cubic-bezier(.2,.8,.2,1) var(--d, .1s), opacity .5s var(--d, .1s), background .2s; }
	.yfa-dr-open .yfa-tile, .yfa-dr-open .yfa-dr-contact { opacity: 1; transform: none; }
	.yfa-tile:active, .yfa-dr-contact:active { transform: translateY(2px) scale(.98); }
	.yfa-tile.on { border-color: rgba(230,196,143,.55); background: linear-gradient(160deg, rgba(230,196,143,.18), rgba(255,255,255,.03)); }
	.yfa-tile b, .yfa-dr-contact b { display: block; font: 700 15px/1.2 Inter, sans-serif; color: #fff; }
	.yfa-tile small, .yfa-dr-contact small { display: block; font-size: 11px; color: rgba(255,255,255,.62); margin-top: 3px; }
	.yfa-tile-arr { position: absolute; top: 14px; inset-inline-end: 12px; color: rgba(230,196,143,.75); font-size: 14px; }
	[dir="rtl"] .yfa-tile-arr { transform: scaleX(-1); }
	.yfa-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 10px;
		box-shadow: 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.18); }
	.yfa-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.yfa-ic.c1 { background: linear-gradient(145deg, #f3dcaa, #b88b4a); }
	.yfa-ic.c1 svg { stroke: #0b2340; }
	.yfa-ic.c2 { background: linear-gradient(145deg, #3aa0e8, #0f5d97); }
	.yfa-ic.c3 { background: linear-gradient(145deg, #2fd2b3, #0e8a78); }
	.yfa-ic.c4 { background: linear-gradient(145deg, #ffd166, #d9962b); }
	.yfa-ic.c5 { background: linear-gradient(145deg, #9b8cff, #5a47d6); }
	.yfa-ic.c6 { background: linear-gradient(145deg, #ff6f91, #d1386a); }
	.yfa-ic.c7 { background: linear-gradient(145deg, #5b6b82, #2b3a50); width: 38px; height: 38px; margin: 0; }
	.yfa-dr-contact { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 12px; --d: .42s; }

	.yfa-dr-foot { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; opacity: 0; transform: translateY(24px); transition: .5s .5s; }
	.yfa-dr-open .yfa-dr-foot { opacity: 1; transform: none; }
	.yfa-dr-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 16px;
		text-decoration: none; font: 800 16px Inter, sans-serif; color: #0b2340 !important;
		background: linear-gradient(135deg, #f3dcaa, #c5a05b 55%, #a87c3c);
		box-shadow: 0 12px 26px rgba(197,160,91,.35), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.15); }
	.yfa-dr-cta:after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
		background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: yfaShine 3.2s infinite; }
	.yfa-dr-cta svg { width: 20px; height: 20px; }
	@keyframes yfaShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
	.yfa-dr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.yfa-dr-mini { height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
		color: #fff !important; font: 700 13px Inter, sans-serif; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
	.yfa-dr-mini svg { width: 17px; height: 17px; fill: none; stroke: #e6c48f; stroke-width: 2; }
	.yfa-dr-trust { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.6); }
	.yfa-dr-trust i { font: 800 11px "Barlow Condensed", sans-serif; font-style: normal; padding: 2px 7px; border-radius: 6px; color: #111; }
	.yfa-dr-trust .tb { background: #3effc3; }
	.yfa-dr-trust .tm { background: linear-gradient(90deg, #f6b4c8, #c0b7ff); }
	html[lang^="ar"] .yfa-tile b, html[lang^="ar"] .yfa-dr-contact b, html[lang^="ar"] .yfa-dr-cta, html[lang^="ar"] .yfa-dr-mini { font-family: Cairo, sans-serif; }

	/* ---- Bottom app bar ---- */
	.yfa-has-appbar { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
	.yfa-has-appbar .yfa-wa-float { display: none; }
	.yfa-has-appbar .ydb { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
	.yfa-appbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; z-index: 99990;
		left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px; border-radius: 22px;
		background: rgba(11,35,64,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		box-shadow: 0 14px 30px rgba(6,22,41,.45), inset 0 1px 0 rgba(255,255,255,.1);
		transition: transform .35s cubic-bezier(.2,.8,.2,1); }
	.yfa-appbar.is-hidden { transform: translateY(130%); }
	.yfa-appbar button { background: none; border: 0; padding: 0; cursor: pointer; }
	.yfa-appbar a, .yfa-appbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: rgba(255,255,255,.62); font: 600 10px Inter, sans-serif; -webkit-tap-highlight-color: transparent; }
	html[lang^="ar"] .yfa-appbar a, html[lang^="ar"] .yfa-appbar button { font-family: Cairo, sans-serif; font-size: 11px; }
	.yfa-appbar a svg, .yfa-appbar button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
	.yfa-appbar a:active svg { transform: scale(.85); }
	.yfa-appbar a.on { color: #e6c48f; }
	.yfa-appbar a.on:after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #e6c48f; }
	.yfa-appbar .yfa-ab-wa { position: relative; top: -18px; }
	.yfa-appbar .yfa-ab-wa span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
		background: linear-gradient(145deg, #3be07d, #1aa84f);
		box-shadow: 0 10px 22px rgba(37,211,102,.45), 0 0 0 6px var(--yfa-bg-ring, #f4f7fb), inset 0 2px 0 rgba(255,255,255,.4);
		animation: yfaPulse 2.4s infinite; }
	.yfa-appbar .yfa-ab-wa svg { width: 28px; height: 28px; stroke: none; }
	@keyframes yfaPulse { 0%, 100% { box-shadow: 0 10px 22px rgba(37,211,102,.45), 0 0 0 6px #f4f7fb; } 50% { box-shadow: 0 10px 30px rgba(37,211,102,.75), 0 0 0 6px #f4f7fb; } }
	.yfa-dr-open .yfa-appbar { transform: translateY(130%); }
}
@media (prefers-reduced-motion: reduce) {
	.yfa-dr-panel, .yfa-tile, .yfa-dr-contact, .yfa-dr-foot { transition: none !important; }
	.yfa-dr-cta:after, .yfa-appbar .yfa-ab-wa span { animation: none !important; }
}