/* ==========================================================================
   ATA Group - Arabic Typography (Cairo)
   --------------------------------------------------------------------------
   Loaded LAST in catalog/view/theme/OPCTB34_01/template/common/header.twig so
   it wins the cascade over the theme + extension stylesheets.

   Strategy
   1) Every text rule in the theme keeps its Latin font first ('Poppins',
      'Playfair Display', Roboto) and now carries 'Cairo' as the next family.
      Latin glyphs therefore render EXACTLY as before, while Arabic glyphs -
      which none of those Latin faces contain - fall through to Cairo. This
      works on both LTR and RTL pages (mixed content, product names, etc.).
   2) On Arabic / RTL pages Cairo becomes the primary family for the whole
      document and the reading metrics are tuned (line-height, letter-spacing,
      weight, smoothing).
   3) Icon fonts (IcoFont, Material Icons, FontAwesome) are explicitly
      protected so no glyph is ever replaced by a text face.
   ========================================================================== */

:root {
	/* Arabic-first stack (RTL pages) */
	--tb-font-ar: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
	/* Latin-first stack with Arabic fallback (LTR pages / mixed content) */
	--tb-font-latin-ar: 'Poppins', 'Cairo', Helvetica, Tahoma, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Global default - Arabic glyphs resolve to Cairo everywhere
   -------------------------------------------------------------------------- */

body {
	font-family: var(--tb-font-latin-ar);
}

/* Form controls do not inherit the document font by default in any browser. */
input,
select,
textarea,
button,
optgroup,
.btn,
.form-control,
.input-group-addon {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   2. Arabic / RTL pages - Cairo as the primary family
   -------------------------------------------------------------------------- */

html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] li,
html[dir="rtl"] ul,
html[dir="rtl"] ol,
html[dir="rtl"] dl,
html[dir="rtl"] dt,
html[dir="rtl"] dd,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] table,
html[dir="rtl"] caption,
html[dir="rtl"] label,
html[dir="rtl"] legend,
html[dir="rtl"] fieldset,
html[dir="rtl"] small,
html[dir="rtl"] strong,
html[dir="rtl"] b,
html[dir="rtl"] em,
html[dir="rtl"] blockquote,
html[dir="rtl"] figcaption,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] option,
html[dir="rtl"] optgroup,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .input-group-addon,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .dropdown-menu > li > a,
html[dir="rtl"] .nav,
html[dir="rtl"] .navbar,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .pagination,
html[dir="rtl"] .alert,
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-title,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .panel,
html[dir="rtl"] .panel-title,
html[dir="rtl"] .tooltip,
html[dir="rtl"] .popover,
html[dir="rtl"] .price,
html[dir="rtl"] .price-new,
html[dir="rtl"] .price-old,
html[dir="rtl"] .price-tax,
html[dir="rtl"] .caption,
html[dir="rtl"] .product-thumb,
html[dir="rtl"] .product-details,
html[dir="rtl"] .tab-content,
html[dir="rtl"] .nav-tabs > li > a,
html[dir="rtl"] .owl-carousel,
html[dir="rtl"] .form-horizontal,
html[dir="rtl"] .text-danger,
html[dir="rtl"] .help-block,
html[dir="rtl"] #cart,
html[dir="rtl"] #cart .dropdown-menu,
html[dir="rtl"] #search,
html[dir="rtl"] header,
html[dir="rtl"] footer,
html[dir="rtl"] .header,
html[dir="rtl"] .footer,
html[dir="rtl"] .tb-menu,
html[dir="rtl"] .tb-megamenu,
html[dir="rtl"] .bootstrap-notify,
html[dir="rtl"] [data-notify],
html[dir="rtl"] .quickview-content,
html[dir="rtl"] .lightbox {
	font-family: var(--tb-font-ar);
}

/* --------------------------------------------------------------------------
   3. Arabic reading metrics
   -------------------------------------------------------------------------- */

html[dir="rtl"] body {
	/* Arabic letterforms are cursive: tracking breaks the joins. */
	letter-spacing: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Reset the theme's 1px Latin tracking wherever it is inherited. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .price,
html[dir="rtl"] .caption,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .dropdown-menu > li > a {
	letter-spacing: normal;
}

/* Headings: Cairo is optically lighter than Poppins at the same weight. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .page-title,
html[dir="rtl"] .product-details h1,
html[dir="rtl"] .caption h4 a,
html[dir="rtl"] .panel-title {
	font-weight: 700;
	line-height: 1.5;
}

/* Running text only - fixed-height UI (buttons, nav, badges) keeps its own
   line-height so nothing shifts vertically. */
html[dir="rtl"] p,
html[dir="rtl"] .tab-content,
html[dir="rtl"] .product-description,
html[dir="rtl"] .description,
html[dir="rtl"] #content .well p,
html[dir="rtl"] .blog-description,
html[dir="rtl"] .information-information #content,
html[dir="rtl"] .alert,
html[dir="rtl"] blockquote {
	line-height: 1.9;
}

html[dir="rtl"] .form-control,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
	/* Keeps Arabic descenders from being clipped inside inputs. */
	line-height: 1.7;
}

/* These two compact buttons ship with a 16px fixed line box + overflow:hidden,
   which clips Arabic descenders. Only the line box is relaxed - colours,
   padding and alignment are untouched. */
html[dir="rtl"] .product-details .btn.btn-default.product-btn-wishlist,
html[dir="rtl"] .product-details .btn.btn-default.product-btn-compare {
	line-height: 21px;
}

html[dir="rtl"] ::-webkit-input-placeholder { font-family: var(--tb-font-ar); letter-spacing: normal; }
html[dir="rtl"] ::-moz-placeholder          { font-family: var(--tb-font-ar); letter-spacing: normal; }
html[dir="rtl"] :-ms-input-placeholder      { font-family: var(--tb-font-ar); letter-spacing: normal; }
html[dir="rtl"] ::placeholder               { font-family: var(--tb-font-ar); letter-spacing: normal; }

/* Prices / quantities stay in Latin digits with even column widths. */
html[dir="rtl"] .price,
html[dir="rtl"] .price-new,
html[dir="rtl"] .price-old,
html[dir="rtl"] .price-tax {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Icon fonts - never substituted
   -------------------------------------------------------------------------- */

[class^="icofont-"],
[class*=" icofont-"],
.icofont {
	font-family: 'IcoFont' !important;
	letter-spacing: normal !important;
}

.material-icons,
i.material-icons {
	font-family: 'Material Icons' !important;
	letter-spacing: normal !important;
	font-feature-settings: 'liga';
}

/* Scoped to the .fa base class only - the theme always pairs `fa` with the
   `fa-*` glyph class, so no plain text element is ever caught here. */
.fa,
.fas,
.far,
.fal,
.fab {
	font-family: 'FontAwesome' !important;
	letter-spacing: normal !important;
}

/* Never let a text face leak into a generated icon glyph. */
html[dir="rtl"] .fa:before,
html[dir="rtl"] [class^="icofont-"]:before,
html[dir="rtl"] [class*=" icofont-"]:before,
html[dir="rtl"] .material-icons:before {
	font-family: inherit;
	letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   5. Responsive - keep Arabic legible on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	html[dir="rtl"] body {
		font-size: 14px;
	}
	html[dir="rtl"] p,
	html[dir="rtl"] .tab-content,
	html[dir="rtl"] .description,
	html[dir="rtl"] .product-description {
		line-height: 1.85;
	}
	html[dir="rtl"] h1 { line-height: 1.45; }
	html[dir="rtl"] h2,
	html[dir="rtl"] h3 { line-height: 1.5; }
}