/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — BASE

   Reset, document typography, and the accessibility primitives every screen relies
   on. This file styles element selectors only; it never names a component. Anything
   with a class lives in layout.css or components.css.
   ═══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
   The browser's own stylesheet says `[hidden] { display: none }`, but a UA declaration
   loses to ANY author declaration regardless of specificity — so the moment a component
   rule gives an element a `display` (`flex` on an overlay backdrop, `grid` on an icon
   button), `node.hidden = true` stops hiding it and only appears to work because the
   element also happened to be empty. That is how a dismissed overlay stayed on screen
   swallowing every click behind it. Restating the rule in author origin, with
   `!important` so it also outranks the component rule it is correcting, makes the
   attribute mean what every module in this application already assumes it means. */
[hidden] { display: none !important; }

html {
  /* 100% rather than a pixel value so the customer's browser font size is honoured —
     a bank's accessibility audit checks this. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--mdp-bg);
  color: var(--mdp-text);
  font-family: var(--mdp-font);
  font-size: var(--mdp-fs-base);
  font-weight: var(--mdp-fw-normal);
  line-height: var(--mdp-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Never let a long unbroken value — a registration number, a URL — force the
     whole layout wider than the viewport. The requirement is "no horizontal
     scrolling", and this is where that is actually won. */
  overflow-wrap: break-word;
}

:root[lang='ar'] body { font-family: var(--mdp-font-ar); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-tight);
  color: var(--mdp-text-strong);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--mdp-fs-2xl); }
h2 { font-size: var(--mdp-fs-xl); }
h3 { font-size: var(--mdp-fs-lg); }
h4 { font-size: var(--mdp-fs-md); }
h5, h6 { font-size: var(--mdp-fs-base); }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

a {
  color: var(--mdp-brand);
  text-decoration: none;
  transition: color var(--mdp-dur-fast) var(--mdp-ease);
}
a:hover { color: var(--mdp-brand-hover); text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
button[disabled], [aria-disabled='true'] { cursor: not-allowed; }

img, svg { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }
code, kbd, samp, pre { font-family: var(--mdp-font-mono); font-size: 0.92em; }

hr {
  border: 0;
  border-top: 1px solid var(--mdp-border-subtle);
  margin: var(--mdp-sp-6) 0;
}

/* ── Focus ─────────────────────────────────────────────────────────────────────
   `:focus-visible` only, so a mouse click does not leave a ring behind, and the
   ring is never removed for keyboard users. One declaration for the whole
   application: a component cannot accidentally ship without a visible focus state.
   ──────────────────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
  border-radius: var(--mdp-r-xs);
}

/* ── Selection & scrollbars ─────────────────────────────────────────────────── */
::selection { background: var(--mdp-brand-soft); color: var(--mdp-text-strong); }

* { scrollbar-width: thin; scrollbar-color: var(--mdp-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mdp-border-strong);
  border-radius: var(--mdp-r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ── Screen-reader-only ────────────────────────────────────────────────────────
   The standard clip-rect technique: present to assistive technology, absent from
   the visual layout, and — unlike `display:none` — still focusable, which is what
   makes the skip link work.
   ──────────────────────────────────────────────────────────────────────────── */
.mdp-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link ─────────────────────────────────────────────────────────────── */
.mdp-skip {
  position: fixed;
  inset-inline-start: var(--mdp-sp-4);
  inset-block-start: calc(-1 * var(--mdp-sp-16));
  z-index: var(--mdp-z-skip);
  padding: var(--mdp-sp-3) var(--mdp-sp-5);
  background: var(--mdp-brand);
  color: var(--mdp-brand-contrast);
  font-weight: var(--mdp-fw-semibold);
  border-radius: var(--mdp-r-sm);
  box-shadow: var(--mdp-shadow-md);
  transition: inset-block-start var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-skip:focus-visible { inset-block-start: var(--mdp-sp-4); text-decoration: none; }

/* ── No-JavaScript fallback ────────────────────────────────────────────────── */
.mdp-noscript {
  max-width: 34rem;
  margin: 15vh auto;
  padding: var(--mdp-sp-8);
  text-align: center;
}
.mdp-noscript h1 { margin-bottom: var(--mdp-sp-3); }
.mdp-noscript p { color: var(--mdp-text-muted); }

/* ── Utilities ─────────────────────────────────────────────────────────────────
   A deliberately tiny set. Anything that would need a third utility is a component.
   ──────────────────────────────────────────────────────────────────────────── */
.mdp-hidden { display: none !important; }
.mdp-mono { font-family: var(--mdp-font-mono); font-variant-ligatures: none; }
.mdp-nowrap { white-space: nowrap; }
.mdp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mdp-numeric { font-variant-numeric: tabular-nums; }

/* ── Reduced motion ────────────────────────────────────────────────────────────
   Zeroing the duration tokens is enough because nothing in the system hardcodes a
   duration. Kept to 0.01ms rather than 0 so `transitionend` still fires and no
   component waits forever for a callback.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mdp-dur-instant: 0.01ms;
    --mdp-dur-fast: 0.01ms;
    --mdp-dur-normal: 0.01ms;
    --mdp-dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ─────────────────────────────────────────────────────────────────────
   A bank prints things. Chrome and shell are dropped; the content is kept.
   ──────────────────────────────────────────────────────────────────────────── */
@media print {
  .mdp-topnav, .mdp-sidenav, .mdp-skip, .mdp-toast-host,
  .mdp-loading-layer, .mdp-offline { display: none !important; }
  .mdp-shell, .mdp-main { display: block !important; margin: 0 !important; padding: 0 !important; }
  body { background: #fff; color: #000; }
}