/* ============================================================================
 * Client overrides - moved out of Customizer "Additional CSS" (2026-10-17).
 *
 * Why: they lived only in the database (wp-custom-css), so they were invisible
 * to file-based review and silently overrode later stylesheet fixes. Keep them
 * here so they are versioned and reviewable.
 *
 * Changes made during the move (approved 2026-10-17):
 *   - .category-reviews .compare-btn: font-size 10px -> 12px (mobile type floor).
 *   - .read-review: hidden on <=768px for every body class, not only
 *     .category-reviews. The review card links to the review from its thumbnail
 *     and its title, so the small text CTA is redundant on phones.
 *   - body.rtl .read-review min-height kept (44px) as a safeguard should the CTA
 *     be re-enabled.
 * ========================================================================== */

@media screen and (max-width: 768px){
	img.cat-icon-img {
    max-width: 45px !important;
  }
	span.appl > img {
    display: none;
  }
	.cat-card h3 {
        font-size: 16px !important;
        margin: 12px 0;
    }
	.category-reviews .compare-btn {
    padding: 7px 3px;
    font-size: 12px !important;
    font-weight: 900;
  }
	.read-review {
    display: none !important;
  }
	body.rtl .read-review{
		min-height: 44px !important
	}
}
img.cat-icon-img {
    max-width: 65px;
}
.panel.alz-article-content {
    padding: 20px;
}
span.appl {
    margin: -5px;
    width: 35%;
}
span.appl > img {
	border-radius: 20px;
}
.guide-card .thumb {
    width: 100%;
}
.category-hub .thumb {
    height: 200px !important;
}
.category-reviews .thumb img.screen {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    top: 0;
    right: 0;
    padding: 10px;
}

.category-reviews .thumb {
    background: transparent !important;
}

.card.pad.right-card {
    margin-bottom: 15px;
}
.rbar {
    grid-template-columns: 110px 1fr 20px !important;
}
.toc-sub {
    display: none;
}
.category-reviews .page-btn {
	padding: 0px !important;
	border-radius: 20px !important;
	border: 0px !important;
}
.thumb {
  height: auto !important;
}
.reviews-hub .thumb, .reviews-hub .panel-wide .thumb {
    min-height: 60px;
}
.category-guides .guide-card .thumb {
    min-height: 80px;
}
.price-offers > div > a.btn.secondary, tbody#alzPmStores > tr > td > a {
    display: none;
}
.side > .card > .products > .product {
    display: grid;
    grid-template-columns: 150px 1fr auto;
}
.product-actions {
    text-align: center;
}
.side > .card > a.mini-btn.cta {
    padding: 10px !important;
}
.category-reviews .price {
    background: #53ae0a;
    border-radius: 20px;
    text-align: center;
    padding: 1px 12px;
    width: fit-content;
    color: white;
}
.category-reviews .card-body h4 {
    height: -webkit-fill-available;
}


/* ============================================================================
 * Mobile audit fixes (2026-10-17)
 *
 * Two groups, both measured at 390x844:
 *
 * 1. Type floor - these were the last runs of text under 12px.
 * 2. Touch targets - WCAG 2.5.8 (AA) asks for 24x24 CSS px; these were 16-19px
 *    tall. Padding is used instead of min-height so the vertical rhythm of the
 *    footer list and the breadcrumb rows does not change (16+10 = 24+2).
 *
 * Left as-is on purpose (they already pass 24x24): .sticky-links a (38px),
 * .mobile-index a (24px), .social a (36px), .share a (32px), .fav (42px).
 * ========================================================================== */
@media screen and (max-width: 768px){
	.overview-bar-row { font-size: 12px; }
	.method-note { font-size: 12px; line-height: 1.5; }
	.home-page .ai-bubble { font-size: 12px; }

	.footer-menu a { padding: 4px 0; margin: 1px 0; }
	.breadcrumbs a, .crumb a, .listing-crumbs a { display: inline-block; padding-block: 5px; }
	.logo .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
	.footer-bottom a { display: inline-block; padding-block: 4px; }
}
@media screen and (max-width: 600px){
	/* These three live inside a max-width:600px block in their own sheets. */
	.overview-bar-row { font-size: 12px; }
	.method-note { font-size: 12px; }
	.home-page .ai-bubble { font-size: 12px; }
}


/* ============================================================================
 * Header add-button overflow, 601-980px (2026-10-17)
 *
 * global.css line ~346 forces .actions .add-btn to 44x44 at <=980, but the
 * font-size:0 / "+" treatment only starts at <=600. In the 601-980 band the
 * Arabic label ("إضافة قائمة", ~59px) stayed visible inside a 44px box and
 * spilled 15px past the left edge. The button sits 12px from the edge, so the
 * document grew 3px wider than the viewport - which mobile emulation then
 * exposed as the whole page sitting at left:3px (RTL scroll anchoring).
 *
 * Fix: in that band let the button size to its label again.
 * ========================================================================== */
@media screen and (min-width: 601px) and (max-width: 980px){
	/* body.rtl .topbar .actions .add-btn is the rule being overridden: it is
	   0,5,0 with !important, so a plain .actions .add-btn (0,2,0) loses no
	   matter how late it loads. The selector is repeated at that weight. */
	body.rtl .topbar .actions .add-btn,
	body.rtl .actions .add-btn {
		width: auto !important;
		min-width: 44px !important;
		padding: 0 12px !important;
		font-size: 12px !important;
		line-height: 1 !important;
	}
}


/* ============================================================================
 * Desktop header overflow, 981-1215px (2026-10-17)
 *
 * The topbar is display:flex above 980px. .nav holds the full menu (786px) and
 * has min-width:auto, so it cannot shrink below its content. Logo 178 + nav 786
 * + search + actions 174 + gaps = ~1216px, which the header demands even on a
 * 1000px window: .page stayed 1000 wide but the header pushed the document to
 * 1216, shifting every element and creating a 235px horizontal scroll.
 *
 * Fix for that band only: let the nav take a min-width:0 flex slot and scroll
 * horizontally (scrollbar hidden). All menu items stay reachable by swipe and
 * nothing is clipped or re-ordered.
 * ========================================================================== */
@media screen and (min-width: 981px) and (max-width: 1230px){
	.topbar .nav {
		min-width: 0 !important;
		flex: 1 1 auto !important;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}
	.topbar .nav::-webkit-scrollbar { display: none; }
	.topbar .nav .menu { flex-wrap: nowrap; }

	/* Keep the search field from being crushed before the nav gives way. */
	.topbar .search { flex: 0 0 auto !important; min-width: 180px; }
}

@media (max-width: 768px) {
  .topbar .actions .icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .al-btn, .btn, .al-login-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  button.save-btn, .filter-close { min-width: 44px; min-height: 44px; }
  .filter-clear { min-height: 44px; display: inline-flex; align-items: center; }
  .category-ads .layout { padding-bottom: 96px; }
  .category-ads .filters .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .category-ads .filters .checks .market-input { width: 100%; min-width: 0; }
  .category-ads .time, .category-ads .detail, .category-ads .market-tag, .category-ads .seller-info { font-size: 12px; }
  .category-ads .hero-card, .category-ads .price-index-card { min-width: 0; overflow-wrap: anywhere; }
  .category-ads .price-index-card { flex: 1 1 100%; }
  .category-card, .trust-box.helper-box { min-width: 0; overflow-wrap: anywhere; }
  .chips .chip { min-height: 44px; display: inline-flex; align-items: center; }
}

.alagheza-fav { cursor: pointer; }
.alagheza-fav.is-favorite { color: #e11d48; }
button.save-btn.is-favorite { color: #e11d48; }