/* Selina Pharmaceutical PLC
   Brand: black on amber, taken straight from the company logo. Amber is the
   identity colour and is used for the header, the mark and accents; it is NOT
   used for body text or large fills, because black-on-amber at length is hard
   to read. Ink black carries the type, amber carries the brand.

   No CDN and no framework: Dire Dawa connections are not always kind, and a
   stylesheet that loads from somewhere else is a page that sometimes doesn't. */

:root {
  --amber:      #F5A800;   /* the logo colour */
  --amber-deep: #D18F00;
  --amber-soft: #FFF4DA;
  --amber-tint: #FFFBF0;
  --ink:        #14110C;
  --ink-soft:   #3D372D;
  --muted:      #6E6656;
  --line:       #E8E1D3;
  --paper:      #FFFFFF;
  --good:       #16794A;
  --warn:       #B4690E;
  --bad:        #A32020;
  --radius:     12px;
  --shadow:     0 1px 2px rgba(20,17,12,.06), 0 8px 24px rgba(20,17,12,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Noto Sans Ethiopic", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: #8A5B00; }
img { max-width: 100%; height: auto; }

.inner { max-width: 1140px; margin: 0 auto; padding: 0 1.1rem; }

/* ── Utility strip ──────────────────────────────────────────────────────── */
.utility { background: var(--ink); color: #D9D2C4; font-size: .8rem; }
.utility .inner { display: flex; align-items: center; gap: .5rem;
                  padding-top: .4rem; padding-bottom: .4rem; flex-wrap: wrap; }
.utility .sep { opacity: .4; }
.utility .tel { color: var(--amber); font-weight: 600; }
.langswitch { margin-left: auto; display: flex; gap: .25rem; }
.langswitch a {
  color: #D9D2C4; text-decoration: none; padding: .1rem .55rem;
  border-radius: 999px; font-weight: 600; border: 1px solid transparent;
}
.langswitch a:hover { border-color: #5A5346; }
.langswitch a.on { background: var(--amber); color: var(--ink); }

/* ── Header ─────────────────────────────────────────────────────────────── */
header.topbar { background: var(--amber); border-bottom: 3px solid var(--ink); }
.topbar .inner { display: flex; align-items: center; gap: 1rem;
                 padding-top: .6rem; padding-bottom: .6rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem;
         text-decoration: none; color: var(--ink); }
.brand img { border-radius: 9px; display: block;
             border: 2px solid var(--ink); background: var(--amber); }
.brandtext { font-weight: 800; font-size: 1.06rem; letter-spacing: -.015em;
             line-height: 1.15; }
.brandtext small { display: block; font-weight: 500; font-size: .72rem;
                   font-style: italic; opacity: .78; }

nav.main { margin-left: auto; display: flex; gap: .2rem;
           align-items: center; flex-wrap: wrap; }
nav.main a { color: var(--ink); text-decoration: none; padding: .4rem .75rem;
             border-radius: 999px; font-size: .9rem; font-weight: 600; }
nav.main a:hover { background: rgba(0,0,0,.09); }
nav.main a.cta { background: var(--ink); color: var(--amber); }
nav.main a.cta:hover { background: #2A241A; }

/* ── Section menus ───────────────────────────────────────────────────────── */
/* Hover-and-focus, no JavaScript. The section link is itself a real link, so a
   touch device that cannot hover still lands somewhere useful. */
.sect { position: relative; display: inline-block; }
.sect > .sub-nav { display: none; position: absolute; top: 100%; left: 0;
                   z-index: 40; min-width: 12rem; padding: .35rem;
                   background: var(--amber); border: 2px solid var(--ink);
                   border-radius: .7rem; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.sect:hover > .sub-nav, .sect:focus-within > .sub-nav { display: block; }
.sect > .sub-nav a { display: block; white-space: nowrap; border-radius: .45rem; }

main { max-width: 1140px; margin: 0 auto; padding: 1.6rem 1.1rem 3rem; }

h1 { font-size: 1.55rem; margin: 0 0 .25rem; letter-spacing: -.022em; }
h2 { font-size: 1.08rem; margin: 1.7rem 0 .55rem; letter-spacing: -.01em; }
.secttitle { margin-top: 2.2rem; }
.sub { color: var(--muted); margin: 0 0 1.1rem; font-size: .92rem; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { background: linear-gradient(180deg, var(--amber) 0%, #F7B424 100%);
        border-bottom: 3px solid var(--ink); }
.hero .inner { display: flex; align-items: center; gap: 2.5rem;
               padding-top: 2.8rem; padding-bottom: 2.8rem; flex-wrap: wrap; }
.herotext { flex: 1 1 420px; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .7rem;
           font-weight: 800; opacity: .68; margin: 0 0 .5rem; }
.hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); max-width: 20ch;
           line-height: 1.14; margin-bottom: .7rem; }
.lede { max-width: 54ch; font-size: 1.02rem; color: var(--ink-soft); margin: 0; }
.herobtns { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.heromark { flex: 0 0 190px; margin: 0 auto; }
.heromark img { border-radius: 18px; border: 3px solid var(--ink);
                box-shadow: 0 10px 30px rgba(20,17,12,.22); }

/* ── Cards, tiles, features ─────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 1.05rem 1.15rem; margin-bottom: 1rem; }

.features { display: grid; gap: .9rem; margin: 0 0 1.6rem;
            grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.feature { background: var(--amber-tint); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 1.1rem; }
.feature h2 { margin: .5rem 0 .35rem; font-size: 1rem; }
.feature p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.ficon { font-size: 1.5rem; line-height: 1; }

.tiles { display: grid; gap: .8rem; margin-bottom: 1.2rem;
         grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }
.tile { background: #fff; border: 1px solid var(--line);
        border-left: 4px solid var(--amber); border-radius: var(--radius);
        padding: .85rem .95rem; box-shadow: var(--shadow); }
.tile .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
               color: var(--muted); font-weight: 800; }
.tile .value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; }
.tile .note { font-size: .8rem; color: var(--muted); }
.tile.bad { border-left-color: var(--bad); }
.tile.warn { border-left-color: var(--warn); }

/* ── Download band ──────────────────────────────────────────────────────── */
.band { background: var(--ink); color: #F3EEE4; border-radius: var(--radius);
        padding: 1.5rem 1.4rem; margin: 1.8rem 0; }
.bandinner { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.bandinner > div:first-child { flex: 1 1 320px; }
.band h2 { margin: 0 0 .3rem; color: var(--amber); font-size: 1.2rem; }
.band p { margin: 0; font-size: .92rem; color: #CFC7B8; max-width: 52ch; }
.dlbtns { display: flex; flex-direction: column; gap: .5rem; min-width: 250px; }

/* Buttons sitting ON the dark band need inverting. The default .dark button is
   ink-on-ink here and the .outline button is near-black text on black — both
   vanish completely against the band. */
.band .btn.dark    { background: var(--amber); color: var(--ink);
                     border-color: var(--amber); }
.band .btn.dark:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.band .btn.outline { background: transparent; color: var(--amber);
                     border-color: var(--amber); }
.band .btn.outline:hover { background: rgba(245,168,0,.16); }
.band .btn.ghost   { background: transparent; color: #F3EEE4; border-color: #6B6252; }
.band .btn.ghost:hover { background: rgba(255,255,255,.10); border-color: #F3EEE4; }

.dlgrid { display: grid; gap: .9rem; margin-bottom: 1.4rem;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dlcard { display: block; text-decoration: none; color: var(--ink);
          background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
          padding: 1.15rem; box-shadow: var(--shadow); transition: .15s; }
.dlcard:hover { border-color: var(--amber); transform: translateY(-2px);
                box-shadow: 0 10px 26px rgba(20,17,12,.10); }
.dlcard h2 { margin: .45rem 0 .3rem; font-size: 1rem; }
.dlcard p { margin: 0; font-size: .87rem; color: var(--muted); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-size: .72rem; text-transform: uppercase;
     letter-spacing: .06em; color: var(--muted); font-weight: 800;
     border-bottom: 2px solid var(--line); padding: .5rem .55rem; }
td { padding: .55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover td { background: var(--amber-tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .13rem .55rem; border-radius: 999px;
         font-size: .73rem; font-weight: 700; white-space: nowrap; }
.badge.received   { background:#EEF2FF; color:#31419B; }
.badge.confirmed,
.badge.delivered,
.badge.released   { background:#E6F4EC; color:#16794A; }
.badge.picked,
.badge.short      { background: var(--amber-soft); color:#8A5B00; }
.badge.dispatched { background:#E8F1FD; color:#1B5FA8; }
.badge.cancelled  { background:#F3F1EE; color:#6E6656; }
.badge.quarantine { background:#FDECEC; color:#A32020; }
.badge.expired,
.badge.recalled   { background:#F3F1EE; color:#6E6656; text-decoration: line-through; }

/* ── Notices ────────────────────────────────────────────────────────────── */
.notice { border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
          font-size: .9rem; border: 1px solid; }
.notice.bad  { background:#FDECEC; border-color:#F0C4C4; color:#7A1818; }
.notice.warn { background:#FFF7E6; border-color:#F2DDAE; color:#7A4A08; }
.notice.good { background:#E9F6EF; border-color:#BFE3D0; color:#115C39; }
.notice.info { background: var(--amber-tint); border-color:#F0E0BD; color:#6B4A08; }

/* ── Forms & buttons ────────────────────────────────────────────────────── */
input[type=text], input[type=password], input[type=number], input[type=search],
select, textarea {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; color: var(--ink); max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--amber-deep); outline-offset: 1px; border-color: var(--amber); }

.btn { display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
       padding: .55rem 1.1rem; border-radius: 9px; border: 2px solid var(--ink);
       background: var(--ink); color: var(--amber); text-decoration: none;
       transition: .15s; text-align: center; }
.btn:hover { background: #2A241A; }
.btn.dark    { background: var(--ink); color: var(--amber); }
.btn.amber   { background: var(--amber); color: var(--ink); }
.btn.amber:hover { background: var(--amber-deep); }
.btn.outline { background: transparent; color: var(--ink); }
.btn.outline:hover { background: rgba(0,0,0,.08); }
.btn.ghost   { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: var(--amber-tint); }
.btn.danger  { background:#fff; color: var(--bad); border-color:#E2B6B6; }
.btn.small   { padding: .3rem .7rem; font-size: .82rem; border-width: 1px; }

.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }

/* ── Invoice / printable ────────────────────────────────────────────────── */
.invoice { max-width: 820px; margin: 0 auto; padding: 2rem; }
.invoice .head { display: flex; justify-content: space-between; gap: 2rem;
                 border-bottom: 3px solid var(--ink); padding-bottom: 1rem; }
.invoice .totals { margin-left: auto; width: 330px; }

@media print {
  .utility, header.topbar, nav.main, .no-print, footer.foot { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .invoice, .card { padding: 0; box-shadow: none; border: none; }
  tbody tr:hover td { background: none; }
  a { text-decoration: none; color: var(--ink); }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.foot { border-top: 3px solid var(--ink); background: var(--amber-tint);
              margin-top: 2.5rem; padding: 1.6rem 0 1rem; font-size: .86rem; }
footer.foot .inner { display: flex; gap: 2rem; flex-wrap: wrap; }
footer.foot .inner > div { flex: 1 1 200px; color: var(--ink-soft); }
footer.foot a { display: inline-block; padding: .1rem 0; }
.copyright { text-align: center; color: var(--muted); font-size: .8rem;
             margin: 1.2rem 0 0; }

@media (max-width: 620px) {
  .heromark { display: none; }
  .hero .inner { padding-top: 2rem; padding-bottom: 2rem; }
  nav.main { width: 100%; }
  .sect > .sub-nav { display: block; position: static; min-width: 0;
                     padding: 0; background: none; border: none; box-shadow: none; }
  .brandtext { font-size: .98rem; }
}

/* ── Find us ────────────────────────────────────────────────────────────── */
.findus{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
        background:var(--amber-tint);border:1px solid var(--line);
        border-radius:var(--radius);padding:1.4rem 1.5rem;margin:1.8rem 0}
.findus > div:first-child{flex:1 1 340px}
.findus h2{margin:0 0 .4rem;font-size:1.15rem}
.findus .addr{font-weight:700;margin:0 0 .3rem}
.findus p{margin:0;color:var(--ink-soft);font-size:.93rem}

.mapcard{flex:0 1 260px;display:block;text-decoration:none;color:var(--ink);
         background:#fff;border:2px solid var(--ink);border-radius:var(--radius);
         padding:1.1rem 1.2rem;box-shadow:var(--shadow);transition:.15s;text-align:center}
.mapcard:hover{background:var(--amber);transform:translateY(-2px)}
.mapcard .pin{display:block;font-size:2rem;line-height:1}
.mapcard strong{display:block;margin:.4rem 0 .2rem;font-size:.95rem}
.mapcard .sub{display:block;font-size:.8rem;color:var(--muted)}
.mapcard .tapmap{display:block;margin-top:.6rem;font-weight:800;font-size:.82rem;
                 color:#8A5B00}
.mapcard:hover .tapmap,.mapcard:hover .sub{color:var(--ink)}


/* ── Money circuit ───────────────────────────────────────────────────────── */
/* A diagram, not a chart library. Four boxes and three arrows say more about
   where cash is stuck than any plotted series, and it prints. */
.flow { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap;
        margin-top: .8rem; }
.flow .stage { flex: 1 1 11rem; background: var(--amber-tint);
               border: 2px solid var(--ink); border-radius: .8rem;
               padding: .8rem .9rem; }
.flow .stage .label { font-size: .8rem; font-weight: 700; text-transform: uppercase;
                      letter-spacing: .04em; color: var(--ink-soft); }
.flow .stage .value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
                      margin-top: .15rem; }
.flow .stage .note { font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.flow .arrow { display: flex; align-items: center; font-size: 1.4rem;
               font-weight: 800; color: var(--ink-soft); }
tr.top td { background: rgba(214, 40, 40, .06); }
@media (max-width: 720px) { .flow .arrow { display: none; } }