/* Yas Marina Yacht Rental – app-style mobile menu + bottom bar · @author Mohammed Zaki */
.yma-drawer, .yma-appbar { display: none; }

@media (max-width: 900px) {
	.yma-nav-menu, .yma-menu-open .yma-nav-menu { display: none !important; }
	.yma-head-book { display: none; }
	.yma-nav { height: 68px; }
	.yma-logo { font-size: 16px; letter-spacing: 1.2px; }
	.yma-logo svg { width: 38px; height: 38px; flex-basis: 38px; }
	.yma-logo small { font-size: 9px; letter-spacing: 2.6px; }

	/* burger: turquoise pill */
	.yma-burger { display: grid !important; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 14px; background: var(--yma-grad); box-shadow: 0 8px 18px rgba(0, 166, 180, .35); }
	.yma-burger span { width: 18px; height: 2px; margin: 2px 0; background: #fff; border-radius: 2px; }
	.yma-burger span:nth-child(2) { width: 12px; margin-inline-start: 6px; }

	/* ---- Drawer: bright sand panel with a sun and soft waves ---- */
	.yma-drawer { display: block; position: fixed; inset: 0; z-index: 1000000; pointer-events: none; }
	.yma-dr-panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; color: var(--yma-teal);
		padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
		display: flex; flex-direction: column;
		background:
			radial-gradient(circle at 100% 0%, rgba(255, 210, 122, .55) 0 90px, transparent 91px),
			radial-gradient(120% 60% at 0% 100%, rgba(0, 166, 180, .16), transparent 60%),
			linear-gradient(180deg, #FFFDF9 0%, var(--yma-sand) 100%);
		clip-path: circle(0% at var(--ox, calc(100% - 40px)) var(--oy, 60px));
		transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
	.yma-dr-panel:after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 120px; opacity: .25; 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='%2300A6B4' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom / 120px 24px; }
	.yma-dr-open { overflow: hidden; }
	.yma-dr-open .yma-drawer { pointer-events: auto; }
	.yma-dr-open .yma-dr-panel { clip-path: circle(150% at var(--ox, calc(100% - 40px)) var(--oy, 60px)); }

	.yma-dr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
	.yma-dr-close { width: 44px; height: 44px; border-radius: 14px; border: 0; background: #fff; box-shadow: var(--yma-shadow);
		color: var(--yma-teal); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
	.yma-drawer .yma-langs { margin: 0 0 16px; padding: 4px; gap: 6px; align-self: flex-start; box-shadow: var(--yma-shadow); border: 0; }
	.yma-drawer .yma-langs a { font-size: 12.5px; padding: 7px 15px; }

	.yma-dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.yma-tile, .yma-dr-contact { position: relative; display: block; border-radius: 20px; padding: 14px 12px 12px; text-decoration: none; color: var(--yma-teal);
		background: #fff; border: 1px solid var(--yma-line); box-shadow: 0 10px 22px rgba(14, 59, 67, .08);
		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; }
	.yma-dr-open .yma-tile, .yma-dr-open .yma-dr-contact { opacity: 1; transform: none; }
	.yma-tile:active, .yma-dr-contact:active { transform: translateY(2px) scale(.98); }
	.yma-tile.on { border-color: var(--yma-turq); background: var(--yma-aqua); }
	.yma-tile b, .yma-dr-contact b { display: block; font: 700 15px/1.2 var(--yma-head); color: var(--yma-teal); }
	.yma-tile small, .yma-dr-contact small { display: block; font-size: 11px; color: var(--yma-muted); margin-top: 3px; }
	.yma-tile-arr { position: absolute; top: 14px; inset-inline-end: 12px; color: var(--yma-coral); font-size: 14px; }
	[dir="rtl"] .yma-tile-arr { transform: scaleX(-1); }
	.yma-ic { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 10px; box-shadow: 0 8px 16px rgba(14, 59, 67, .18), inset 0 1px 0 rgba(255, 255, 255, .45); }
	.yma-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.yma-ic.c1 { background: var(--yma-grad); }
	.yma-ic.c2 { background: linear-gradient(145deg, #2E7C87, var(--yma-teal)); }
	.yma-ic.c3 { background: var(--yma-grad-sun); }
	.yma-ic.c4 { background: linear-gradient(145deg, #FFD27A, #F5A623); }
	.yma-ic.c5 { background: linear-gradient(145deg, #8FE3E8, #2FB8C4); }
	.yma-ic.c6 { background: linear-gradient(145deg, #FFB199, #FF7A63); }
	.yma-ic.c7 { background: linear-gradient(145deg, #5BC0C8, #0E7C87); width: 40px; height: 40px; margin: 0; }
	.yma-dr-contact { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 12px; --d: .42s; }

	.yma-dr-foot { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; opacity: 0; transform: translateY(24px); transition: .5s .5s; position: relative; z-index: 1; }
	.yma-dr-open .yma-dr-foot { opacity: 1; transform: none; }
	.yma-dr-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 999px;
		text-decoration: none; font: 800 16px var(--yma-head); color: #fff !important; background: #25D366; box-shadow: 0 12px 26px rgba(37, 211, 102, .4); }
	.yma-dr-cta:after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); animation: ymaShine 3.2s infinite; }
	.yma-dr-cta svg { width: 22px; height: 22px; }
	@keyframes ymaShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
	.yma-dr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.yma-dr-mini { height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
		color: var(--yma-teal) !important; font: 700 13px var(--yma-head); background: #fff; box-shadow: 0 6px 16px rgba(14, 59, 67, .08); }
	.yma-dr-mini svg { width: 17px; height: 17px; fill: none; stroke: var(--yma-turq-d); stroke-width: 2; }
	.yma-dr-trust { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; color: var(--yma-muted); }
	.yma-dr-trust i { font: 800 11px Inter, sans-serif; font-style: normal; padding: 2px 7px; border-radius: 6px; color: #111; }
	.yma-dr-trust .tb { background: #3EFFC3; }
	.yma-dr-trust .tm { background: linear-gradient(90deg, #f6b4c8, #c0b7ff); }

	/* ---- Bottom app bar: white pill, turquoise active, green WhatsApp in the middle ---- */
	.yma-has-appbar { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
	.yma-has-appbar .yma-wa-float { display: none; }
	.yma-has-appbar .ymb { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
	.yma-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: 24px;
		background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		box-shadow: 0 14px 34px rgba(14, 59, 67, .22), inset 0 0 0 1px var(--yma-line);
		transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
	.yma-appbar.is-hidden { transform: translateY(130%); }
	.yma-appbar button { background: none; border: 0; padding: 0; cursor: pointer; }
	.yma-appbar a, .yma-appbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--yma-muted); font: 600 10px Inter, sans-serif; -webkit-tap-highlight-color: transparent; }
	html[lang^="ar"] .yma-appbar a, html[lang^="ar"] .yma-appbar button { font-family: Tajawal, sans-serif; font-size: 11.5px; }
	.yma-appbar a svg, .yma-appbar button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
	.yma-appbar a:active svg { transform: scale(.85); }
	.yma-appbar a.on { color: var(--yma-turq-d); }
	.yma-appbar a.on:after { content: ""; width: 16px; height: 3px; border-radius: 3px; background: var(--yma-coral); }
	.yma-appbar .yma-ab-wa { position: relative; top: -18px; }
	.yma-appbar .yma-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 #fff;
		animation: ymaPulse 2.4s infinite; }
	.yma-appbar .yma-ab-wa svg { width: 28px; height: 28px; stroke: none; }
	@keyframes ymaPulse { 0%, 100% { box-shadow: 0 10px 22px rgba(37, 211, 102, .45), 0 0 0 6px #fff; } 50% { box-shadow: 0 10px 30px rgba(37, 211, 102, .75), 0 0 0 6px #fff; } }
	.yma-dr-open .yma-appbar { transform: translateY(130%); }
}
@media (prefers-reduced-motion: reduce) {
	.yma-dr-panel, .yma-tile, .yma-dr-contact, .yma-dr-foot { transition: none !important; }
	.yma-dr-cta:after, .yma-appbar .yma-ab-wa span { animation: none !important; }
}