/* =========================================================================
   STC Pay — CSS entry file
   -------------------------------------------------------------------------
   Architecture: ITCSS layers + BEM naming + native @layer.
   This file contains NO CODE; it only defines the layer order and loads the parts.

   Layer order (left to right = lowest to highest priority):
     settings   → design tokens (color, font, spacing) — variables only
     base       → reset + bare HTML element styles
     layout     → page layout scaffolds (container, grid)
     components → UI components (button, header, hero, footer...)
     utilities  → single-purpose helpers (highest priority)

   Thanks to @layer, the cascade order is INDEPENDENT OF FILE ORDER; this
   prevents one component from accidentally overriding another.
   ========================================================================= */

@layer settings, base, layout, components, utilities;

/* settings */
@import url("settings/tokens.css") layer(settings);

/* base */
@import url("base/fonts.css") layer(base);
@import url("base/reset.css") layer(base);
@import url("base/elements.css") layer(base);

/* layout */
@import url("layout/container.css") layer(layout);

/* components */
@import url("components/button.css") layer(components);
@import url("components/section-head.css") layer(components);
@import url("components/header.css") layer(components);
@import url("components/hero.css") layer(components);
@import url("components/split-hero.css") layer(components);
@import url("components/highlights.css") layer(components);
@import url("components/why.css") layer(components);
@import url("components/offers-grid.css") layer(components);
@import url("components/feature-rows.css") layer(components);
@import url("components/breadcrumb.css") layer(components);
@import url("components/offer-detail.css") layer(components);
@import url("components/blog-list.css") layer(components);
@import url("components/single-post.css") layer(components);
@import url("components/help-center.css") layer(components);
@import url("components/logos.css") layer(components);
@import url("components/features.css") layer(components);
@import url("components/solutions.css") layer(components);
@import url("components/uniques.css") layer(components);
@import url("components/calculator.css") layer(components);
@import url("components/testimonials.css") layer(components);
@import url("components/steps.css") layer(components);
@import url("components/faq.css") layer(components);
@import url("components/faq-page.css") layer(components);
@import url("components/cta-banner.css") layer(components);
@import url("components/contact-strip.css") layer(components);
@import url("components/content.css") layer(components);
@import url("components/footer.css") layer(components);
@import url("components/error-404.css") layer(components);

/* utilities */
@import url("utilities/utilities.css") layer(utilities);

/* RTL overrides — unlayered so they win over all layers when [dir="rtl"]. */
@import url("rtl.css");