/* gateway.css — the country chooser on albatriq.com.
 *
 * Self-contained on purpose. The application's stylesheets live on the
 * regional hosts, and the front door must render before a country has been
 * chosen, so it cannot load anything from one of them. The tokens are copied
 * from albatriq.css rather than imported, and they are the only thing copied:
 * this page has four components and nothing here is worth sharing back.
 *
 * Everything that has a side is written logically — inline-start, inline-end —
 * so the English version flips on its own from `dir="ltr"` on <html>.
 */

:root {
    --brand-900: #0b1f3a;
    --brand-800: #10294b;
    --brand-700: #16365f;
    --brand-500: #2a5c96;
    --brand-050: #eef4fb;

    --gold-600: #e07f10;
    --gold-500: #f79520;
    --gold-200: #fcd9a8;

    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-200: #e2e8f0;
    --ink-100: #f1f5f9;

    --surface: #ffffff;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink-900);
    background:
        radial-gradient(1100px 520px at 50% -180px, var(--brand-700), transparent 70%),
        var(--brand-900);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.7;
}

/* ------------------------------------------------------------------ header */
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem clamp(1rem, 4vw, 3rem);
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: #fff;
}

.brand img {
    border-radius: 10px;
    display: block;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text strong { font-size: 1.15rem; font-weight: 800; }
.brand-text small  { font-size: .78rem; color: var(--gold-200); font-weight: 600; }

.lang {
    color: #fff;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 700;
    padding: .4rem .9rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    /* each label reads in its own script's direction whatever the page is set to */
    unicode-bidi: plaintext;
}
.lang:hover { background: rgba(255, 255, 255, .12); }

/* -------------------------------------------------------------------- main */
main {
    flex: 1;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 3rem) 3rem;
}

h1 {
    color: #fff;
    font-size: clamp(1.7rem, 4.5vw, 2.6rem);
    font-weight: 800;
    margin: 1rem 0 .5rem;
    text-align: center;
}

.lede {
    color: #c9d8ea;
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 2.2rem;
    font-size: clamp(.95rem, 2.2vw, 1.05rem);
}

/* ----------------------------------------------------------------- notices */
.notice {
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.6rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}
.notice p { margin: .3rem 0 0; color: #c9d8ea; font-size: .9rem; }
.notice-bad { border-color: var(--gold-500); }

/* ----------------------------------------------------------------- regions */
.regions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.region a,
.region .region-inner {
    display: grid;
    /* the flag sits beside a stack of three lines, with the action at the end */
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "flag name"
        "flag auth"
        "flag host"
        "go   go";
    column-gap: .9rem;
    row-gap: .1rem;
    align-items: center;

    height: 100%;
    padding: 1.3rem;
    background: var(--surface);
    border: 2px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.region a:hover,
.region a:focus-visible {
    transform: translateY(-3px);
    border-color: var(--gold-500);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .22);
    outline: none;
}

.region-on a,
.region-on .region-inner { border-color: var(--gold-500); }

.flag        { grid-area: flag; font-size: 2.4rem; line-height: 1; }
.region-name { grid-area: name; font-weight: 800; font-size: 1.2rem; }
.region-auth { grid-area: auth; font-size: .82rem; color: var(--ink-700); }
.region-host { grid-area: host; font-size: .78rem; color: var(--ink-500);
               font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
               unicode-bidi: plaintext; }

/* Its own line, always. Inline, it lands in the middle of a wrapped phrase --
   «هيئة الزكاة والضريبة [ZATCA] والجمارك» -- which reads as a mistake rather
   than as an abbreviation of what came before it. */
.abbr {
    display: block;
    width: fit-content;
    margin-top: .3rem;
    font-size: .7rem;
    font-weight: 700;
    background: var(--brand-050);
    color: var(--brand-700);
    border-radius: 6px;
    padding: 0 .4rem;
    unicode-bidi: plaintext;
}

.go, .soon {
    grid-area: go;
    margin-top: .9rem;
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    border-radius: 10px;
    padding: .55rem 1rem;
}
.go   { background: var(--brand-800); color: #fff; }
.soon { background: var(--ink-100); color: var(--ink-500); }

.region-soon .region-inner { opacity: .72; box-shadow: none; }

.located {
    color: #c9d8ea;
    text-align: center;
    font-size: .88rem;
    margin: 1.4rem auto 0;
    max-width: 40rem;
}

/* -------------------------------------------------------------------- what */
.what {
    margin-top: 3rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
}
.what h2 { color: #fff; font-size: 1.15rem; margin: 0 0 .8rem; }
.what ul { margin: 0; padding-inline-start: 1.2rem; color: #c9d8ea; }
.what li { margin-bottom: .5rem; font-size: .92rem; }

/* ------------------------------------------------------------------ footer */
footer {
    text-align: center;
    padding: 1.5rem 1rem 2.5rem;
    color: #8ea8c4;
    font-size: .82rem;
}
footer p { margin: .2rem 0; }
footer .copy { color: #6d87a3; unicode-bidi: plaintext; }

@media (prefers-reduced-motion: reduce) {
    .region a { transition: none; }
    .region a:hover { transform: none; }
}

/* The countries that are not open yet. A line rather than cards: a card is an
   invitation, and there is nowhere to go. */
.coming {
    margin: 1.6rem auto 0;
    max-width: 44rem;
    text-align: center;
    color: #8ea8c4;
    font-size: .88rem;
    line-height: 2.1;
}
.coming span:first-child { color: #c9d8ea; font-weight: 700; }
.coming-one {
    display: inline-block;
    padding: .15rem .6rem;
    margin: 0 .15rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    white-space: nowrap;
}