/* Alpha 48 — definitive WooCommerce layout and mobile navigation fixes. */

/* ---------- My account: explicit grid areas so Woo notices never shift columns. ---------- */
body.mbx-account-page.logged-in .entry-content > .woocommerce,
body.mbx-account-page.logged-in .woocommerce{
	display:grid!important;
	grid-template-columns:minmax(0,1fr) 280px!important;
	grid-template-areas:
		"notices notices"
		"content navigation"!important;
	gap:26px 30px!important;
	align-items:start!important;
	width:100%!important;
	max-width:none!important;
	direction:ltr!important;
}
body.mbx-account-page.logged-in .woocommerce > .woocommerce-notices-wrapper{
	grid-area:notices!important;
	width:100%!important;
	min-width:0!important;
	margin:0!important;
}
body.mbx-account-page.logged-in .woocommerce-MyAccount-navigation{
	grid-area:navigation!important;
	width:100%!important;
	max-width:280px!important;
	float:none!important;
	margin:0!important;
	direction:rtl!important;
	position:sticky!important;
	top:112px!important;
}
body.mbx-account-page.logged-in .woocommerce-MyAccount-content{
	grid-area:content!important;
	width:100%!important;
	max-width:none!important;
	min-width:0!important;
	float:none!important;
	margin:0!important;
	direction:rtl!important;
	align-self:start!important;
}
body.mbx-account-page .woocommerce-MyAccount-content > *{max-width:100%!important;min-width:0!important}
body.mbx-account-page .mbr-account,
body.mbx-account-page .mbr-booking-detail,
body.mbx-account-page .mbr-account-bookings{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
body.mbx-account-page .mbr-account-booking{
	grid-template-columns:minmax(0,1fr) 150px 190px!important;
	width:100%!important;
	min-width:0!important;
	gap:18px!important;
}
body.mbx-account-page .mbr-account-booking__main,
body.mbx-account-page .mbr-account-booking__price,
body.mbx-account-page .mbr-account-booking__actions{min-width:0!important}
body.mbx-account-page .mbr-account-booking__actions{justify-content:flex-start!important}
body.mbx-account-page .mbr-account-booking__actions .button{white-space:nowrap!important;text-align:center!important}
body.mbx-account-page .mbr-account-heading{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:20px!important;padding-bottom:18px!important;border-bottom:1px solid #e8edf1!important}
body.mbx-account-page .mbr-account-heading h2{font-size:30px!important;color:#0b2a47!important;margin:0 0 5px!important}
body.mbx-account-page .mbr-account-heading p{margin:0!important}
body.mbx-account-page:not(.logged-in):not(.mbx-auth-page) .woocommerce{display:block!important;max-width:650px!important;margin-inline:auto!important}
body.mbx-account-page:not(.logged-in) .woocommerce-form-login{background:#fff!important;border:1px solid #e2e8ec!important;border-radius:16px!important;padding:28px!important;box-shadow:0 12px 30px rgba(8,41,68,.06)!important}

/* ---------- Checkout: force true two-column desktop layout for Blocks and classic checkout. ---------- */
body.mbx-checkout-page .inside-article{width:min(1280px,calc(100% - 40px))!important;max-width:1280px!important}
body.mbx-checkout-page .entry-content,
body.mbx-checkout-page .wp-block-woocommerce-checkout,
body.mbx-checkout-page .wc-block-checkout{width:100%!important;max-width:none!important;min-width:0!important}

/* WooCommerce Checkout Block. Summary left, customer form right. */
body.mbx-checkout-page .wc-block-checkout .wc-block-components-sidebar-layout,
body.mbx-checkout-page .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout{
	display:grid!important;
	grid-template-columns:390px minmax(0,1fr)!important;
	grid-template-areas:"summary checkout"!important;
	gap:32px!important;
	align-items:start!important;
	width:100%!important;
	max-width:none!important;
	margin:0!important;
	direction:ltr!important;
}
body.mbx-checkout-page .wc-block-components-sidebar-layout .wc-block-checkout__main{
	grid-area:checkout!important;
	width:100%!important;
	max-width:none!important;
	min-width:0!important;
	flex:0 1 auto!important;
	padding:0!important;
	margin:0!important;
	direction:rtl!important;
}
body.mbx-checkout-page .wc-block-components-sidebar-layout .wc-block-checkout__sidebar{
	grid-area:summary!important;
	width:100%!important;
	max-width:none!important;
	min-width:0!important;
	flex:0 1 auto!important;
	padding:0!important;
	margin:0!important;
	position:sticky!important;
	top:112px!important;
	direction:rtl!important;
}
body.mbx-checkout-page .wc-block-components-sidebar-layout .wc-block-checkout__sidebar > *{width:100%!important;max-width:none!important}
body.mbx-checkout-page .wc-block-checkout__main .wc-block-components-checkout-step,
body.mbx-checkout-page .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{width:100%!important;max-width:none!important}

/* Classic checkout. */
body.mbx-checkout-page form.checkout.woocommerce-checkout{
	display:grid!important;
	grid-template-columns:390px minmax(0,1fr)!important;
	grid-template-areas:"order customer"!important;
	gap:32px!important;
	align-items:start!important;
	width:100%!important;
	max-width:none!important;
	direction:ltr!important;
}
body.mbx-checkout-page form.checkout #customer_details{
	grid-area:customer!important;
	width:100%!important;
	min-width:0!important;
	direction:rtl!important;
}
body.mbx-checkout-page form.checkout #order_review_heading{display:none!important}
body.mbx-checkout-page form.checkout #order_review{
	grid-area:order!important;
	width:100%!important;
	min-width:0!important;
	margin:0!important;
	direction:rtl!important;
}
body.mbx-checkout-page form.checkout #order_review:before{
	content:"ملخص الحجز";
	display:block;
	color:#0b2a47;
	font-size:21px;
	font-weight:800;
	margin:0 0 16px;
}
body.mbx-checkout-page .wc-block-components-checkout-step__heading,
body.mbx-checkout-page .wc-block-components-title{direction:rtl!important;text-align:right!important}
body.mbx-checkout-page .wc-block-components-checkout-step__description,
body.mbx-checkout-page .wc-block-components-checkout-step__container,
body.mbx-checkout-page .wc-block-components-address-form,
body.mbx-checkout-page .wc-block-components-radio-control,
body.mbx-checkout-page .wc-block-components-checkbox{direction:rtl!important;text-align:right!important}
body.mbx-checkout-page .wc-block-components-order-summary-item__image{margin-left:14px!important;margin-right:0!important}

/* ---------- Mobile header: double-size logo, reserve the header for logo + menu only. ---------- */
@media(max-width:900px){
	html body #makkah-v2-header .makkah-v2-header-row{
		display:grid!important;
		grid-template-columns:minmax(190px,1fr) 48px!important;
		grid-template-rows:72px!important;
		gap:10px!important;
		align-items:center!important;
		direction:ltr!important;
		padding:0 14px!important;
		overflow:visible!important;
	}
	html body #makkah-v2-header .makkah-v2-brand-wrap{
		grid-column:1!important;
		grid-row:1!important;
		position:static!important;
		transform:none!important;
		order:initial!important;
		width:190px!important;
		min-width:190px!important;
		height:70px!important;
		display:flex!important;
		align-items:center!important;
		justify-content:flex-start!important;
		overflow:visible!important;
	}
	html body #makkah-v2-header .makkah-v2-custom-logo,
	html body #makkah-v2-header .makkah-v2-custom-logo .custom-logo-link{
		display:flex!important;
		align-items:center!important;
		justify-content:flex-start!important;
		width:190px!important;
		max-width:190px!important;
		height:70px!important;
		margin:0!important;
		padding:0!important;
		overflow:visible!important;
	}
	html body #makkah-v2-header .custom-logo{
		display:block!important;
		width:auto!important;
		height:auto!important;
		max-width:92px!important;
		max-height:34px!important;
		transform:scale(2)!important;
		transform-origin:left center!important;
		object-fit:contain!important;
		filter:brightness(0) invert(1)!important;
		opacity:1!important;
		visibility:visible!important;
	}
	html body #makkah-v2-header .makkah-v2-actions{display:none!important}
	html body #makkah-v2-header .makkah-v2-menu-toggle{
		grid-column:2!important;
		grid-row:1!important;
		justify-self:end!important;
		position:static!important;
		transform:none!important;
		margin:0!important;
	}
}
@media(max-width:480px){
	html body #makkah-v2-header .makkah-v2-header-row{grid-template-columns:minmax(165px,1fr) 46px!important;padding:0 10px!important}
	html body #makkah-v2-header .makkah-v2-brand-wrap,
	html body #makkah-v2-header .makkah-v2-custom-logo,
	html body #makkah-v2-header .makkah-v2-custom-logo .custom-logo-link{width:170px!important;min-width:170px!important;max-width:170px!important}
	html body #makkah-v2-header .custom-logo{max-width:82px!important;max-height:32px!important}
}

/* ---------- Tools and every social icon inside the mobile side menu. ---------- */
.mb48-mobile-tools,.mb48-mobile-socials{display:none}
@media(max-width:900px){
	html body #makkah-v2-header .makkah-v2-mobile-inner{overflow-y:auto!important}
	html body #makkah-v2-header .mb48-mobile-tools{
		display:block!important;
		padding:20px 0 18px!important;
		border-bottom:1px solid #e7ecf0!important;
	}
	html body #makkah-v2-header .mb48-mobile-tools__title{
		display:block!important;
		margin:0 0 12px!important;
		color:#0b2a47!important;
		font-size:13px!important;
		font-weight:800!important;
	}
	html body #makkah-v2-header .mb48-mobile-tools__grid{
		display:grid!important;
		grid-template-columns:repeat(4,minmax(0,1fr))!important;
		gap:10px!important;
	}
	html body #makkah-v2-header .mb48-mobile-tool{
		min-width:0!important;
		min-height:72px!important;
		display:flex!important;
		flex-direction:column!important;
		align-items:center!important;
		justify-content:center!important;
		gap:7px!important;
		padding:8px 5px!important;
		border:1px solid #dce4ea!important;
		border-radius:12px!important;
		background:#f8fafc!important;
		color:#15334c!important;
		font-family:"Cairo",sans-serif!important;
		font-size:10px!important;
		font-weight:700!important;
		text-decoration:none!important;
		cursor:pointer!important;
	}
	html body #makkah-v2-header .mb48-mobile-tool:hover{background:#0b2a47!important;color:#fff!important;border-color:#0b2a47!important}
	html body #makkah-v2-header .mb48-mobile-tool svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
	html body #makkah-v2-header .mb48-mobile-socials{
		display:flex!important;
		align-items:center!important;
		justify-content:center!important;
		flex-wrap:wrap!important;
		gap:9px!important;
		padding:16px 0 4px!important;
	}
	html body #makkah-v2-header .mb48-mobile-socials a{
		width:38px!important;
		height:38px!important;
		display:grid!important;
		place-items:center!important;
		border-radius:50%!important;
		border:1px solid #d7e0e6!important;
		background:#fff!important;
		color:#0b2a47!important;
	}
	html body #makkah-v2-header .mb48-mobile-socials a:hover{background:#d9a84e!important;color:#fff!important;border-color:#d9a84e!important}
	html body #makkah-v2-header .mb48-mobile-socials svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important}
	html body #makkah-v2-header .mb48-mobile-socials img{width:18px!important;height:18px!important;object-fit:contain!important}
}

/* ---------- Responsive account and checkout. ---------- */
@media(max-width:960px){
	body.mbx-account-page.logged-in .entry-content > .woocommerce,
	body.mbx-account-page.logged-in .woocommerce{
		grid-template-columns:1fr!important;
		grid-template-areas:"notices" "navigation" "content"!important;
		gap:18px!important;
	}
	body.mbx-account-page.logged-in .woocommerce-MyAccount-navigation{position:static!important;max-width:none!important}
	body.mbx-account-page .woocommerce-MyAccount-navigation ul{display:flex!important;overflow-x:auto!important;gap:6px!important;scrollbar-width:none!important}
	body.mbx-account-page .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none!important}
	body.mbx-account-page .woocommerce-MyAccount-navigation li{flex:0 0 auto!important;border:0!important}
	body.mbx-account-page .woocommerce-MyAccount-navigation a{white-space:nowrap!important}
	body.mbx-checkout-page .wc-block-checkout .wc-block-components-sidebar-layout,
	body.mbx-checkout-page .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
	body.mbx-checkout-page form.checkout.woocommerce-checkout{
		grid-template-columns:1fr!important;
		grid-template-areas:"checkout" "summary"!important;
		gap:22px!important;
	}
	body.mbx-checkout-page form.checkout.woocommerce-checkout{grid-template-areas:"customer" "order"!important}
	body.mbx-checkout-page .wc-block-components-sidebar-layout .wc-block-checkout__sidebar,
	body.mbx-checkout-page form.checkout #order_review{position:static!important}
}
@media(max-width:700px){
	body.mbx-woocommerce-page .site-main{padding:28px 0 48px!important}
	body.mbx-woocommerce-page .inside-article{width:min(100% - 20px,1280px)!important}
	body.mbx-woocommerce-page .entry-title{font-size:28px!important}
	body.mbx-account-page .woocommerce-MyAccount-content{padding:17px!important}
	body.mbx-account-page .mbr-account-heading{display:block!important}
	body.mbx-account-page .mbr-account-booking{grid-template-columns:1fr!important;padding:16px!important}
	body.mbx-account-page .mbr-account-booking__actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
	body.mbx-checkout-page .wc-block-components-checkout-step,
	body.mbx-checkout-page .wp-block-woocommerce-checkout-order-summary-block{padding:16px!important}
}


/* Alpha 49 hotfix — the Alpha 48 stylesheet contained invalid `dis:` declarations.
   These final rules intentionally win against older mobile-menu layers. */
@media(max-width:900px){
	html body #makkah-v2-header .makkah-v2-mobile-inner > .mb48-mobile-tools{
		display:block!important;
		visibility:visible!important;
		opacity:1!important;
		position:relative!important;
		height:auto!important;
		min-height:0!important;
		max-height:none!important;
		overflow:visible!important;
		margin:0!important;
		padding:18px 0 20px!important;
	}
	html body #makkah-v2-header .mb48-mobile-tools__title{display:block!important}
	html body #makkah-v2-header .mb48-mobile-tools__grid{display:grid!important}
	html body #makkah-v2-header .mb48-mobile-tool{display:flex!important}
	html body #makkah-v2-header .mb48-mobile-socials{
		display:flex!important;
		visibility:visible!important;
		opacity:1!important;
		height:auto!important;
		max-height:none!important;
	}
	html body #makkah-v2-header .mb48-mobile-socials a{display:grid!important}
}
