/*
 * Public pages for the Nepal portal.
 *
 * Plain light service page. Deliberately restrained: flat colour, real rules,
 * no gradients, no watermarks, no decorative glow. Structure carries the
 * identity instead -- a sticky left rail holding the search, with the content
 * stacked beside it, which is unlike afg (split hero), bdesh (centred card and
 * timeline) and ind (document masthead).
 *
 * Crimson #c8102e and navy #003893 are the flag's two colours.
 */

:root {
    --np-crimson: #c8102e;
    --np-navy:    #003893;
    --np-ink:     #1a1d21;
    --np-text:    #545c66;
    --np-line:    #dfe3e8;
    --np-line-2:  #eef0f3;
    --np-page:    #f4f5f7;
}

body.public {
    background: var(--np-page);
    color: var(--np-text);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--np-ink); }

/* ---------------------------------------------------------------- header */

.topbar { background: #fff; border-bottom: 3px solid var(--np-crimson); }

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    text-decoration: none;
}

.topbar .brand:hover { text-decoration: none; }

.topbar .brand-text strong {
    display: block;
    font-size: 15px;
    color: var(--np-ink);
    line-height: 1.25;
}

.topbar .brand-text span { display: block; font-size: 11.5px; color: var(--np-text); }

.topbar-link { font-size: 13px; color: var(--np-navy); text-decoration: none; font-weight: 600; }
.topbar-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------ title band */

/* A page title, not a marketing hero. */
.titleband { background: #fff; border-bottom: 1px solid var(--np-line); padding: 26px 0; }

.titleband h1 {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.28;
}

.titleband p { margin: 0; max-width: 68ch; font-size: 15px; }

/* ------------------------------------------------------------- page body */

.page-body { padding: 30px 0 50px; }

/* Left rail: sticks while the content beside it scrolls. */
.rail { position: sticky; top: 22px; }

.search-card { background: #fff; border: 1px solid var(--np-line); border-radius: 4px; }

.search-card .sc-head {
    padding: 12px 18px;
    border-bottom: 1px solid var(--np-line);
}

.search-card .sc-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--np-crimson);
}

.search-card .sc-body { padding: 18px; }

.search-card label {
    font-size: 12px;
    font-weight: 600;
    color: var(--np-ink);
    margin-bottom: 5px;
}

.field {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 15px;
    color: var(--np-ink);
    background: #fff;
    border: 1px solid #c2c8d0;
    border-radius: 3px;
}

.field:focus {
    outline: 0;
    border-color: var(--np-navy);
    box-shadow: 0 0 0 3px rgba(0, 56, 147, .13);
}

select.field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23545c66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.btn-verify {
    width: 100%;
    height: 44px;
    border: 1px solid var(--np-crimson);
    border-radius: 3px;
    background: var(--np-crimson);
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
}

.btn-verify:hover, .btn-verify:focus { background: #a80d26; border-color: #a80d26; color: #fff; text-decoration: none; }

.sc-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--np-line-2);
    font-size: 12.5px;
    color: var(--np-text);
}

/* ---------------------------------------------------------- content blocks */

.block { background: #fff; border: 1px solid var(--np-line); border-radius: 4px; padding: 24px; margin-bottom: 20px; }

.block > h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.block > .block-intro { font-size: 14px; margin: 0 0 18px; }

/* Numbered list with a crimson rule down the left */
.ol-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }

.ol-steps li {
    counter-increment: s;
    position: relative;
    padding: 0 0 16px 34px;
    border-left: 2px solid var(--np-line-2);
    margin-left: 11px;
}

.ol-steps li:last-child { padding-bottom: 0; border-left-color: transparent; }

.ol-steps li::before {
    content: counter(s);
    position: absolute;
    left: -12px;
    top: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--np-crimson);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ol-steps strong { display: block; color: var(--np-ink); font-size: 14.5px; margin-bottom: 3px; }
.ol-steps p { margin: 0; font-size: 13.5px; }

/* Two-column disclosure lists */
.disclose { display: flex; flex-wrap: wrap; gap: 26px; }
.disclose > div { flex: 1 1 240px; min-width: 0; }

.disclose h3 {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--np-line);
}

.disclose h3.yes { color: #1f7a3d; }
.disclose h3.no  { color: var(--np-crimson); }

.field-list { list-style: none; margin: 0; padding: 0; }

.field-list li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--np-line-2);
}

.field-list li:last-child { border-bottom: 0; }

.field-list li::before {
    position: absolute;
    left: 0;
    top: 6px;
    font-weight: 700;
    font-size: 12px;
}

/* Literal characters rather than CSS escapes -- a doubled backslash here
   reads as an escaped backslash, not a code point. */
.field-list.yes li::before { content: "✓"; color: #1f7a3d; }
.field-list.no  li::before { content: "×"; color: var(--np-crimson); }

/* Search-field reference table, specific to this site's four options */
.keytable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.keytable th, .keytable td { padding: 9px 10px; border-bottom: 1px solid var(--np-line-2); text-align: left; }
.keytable th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--np-text); font-weight: 700; border-bottom: 1px solid var(--np-line); }
.keytable td:first-child { font-weight: 600; color: var(--np-ink); white-space: nowrap; }
.keytable tr:last-child td { border-bottom: 0; }

/* FAQ: plain rules, no boxes */
.faq-item { border-bottom: 1px solid var(--np-line-2); }
.faq-item:last-child { border-bottom: 0; }

.faq-q {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 14px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--np-ink);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.faq-q:focus { outline: 0; color: var(--np-navy); }
.faq-q .chev { color: var(--np-crimson); font-size: 12px; transition: transform .18s ease; flex: 0 0 auto; }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { padding: 0 0 15px; font-size: 13.5px; max-width: 74ch; }

/* --------------------------------------------------------------- results */

.result-banner {
    padding: 17px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--np-line);
    border-left: 4px solid;
    border-radius: 4px;
}

.result-banner .icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.result-banner h2 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.result-banner p  { margin: 0; font-size: 13.5px; }

.result-banner.is-valid   { border-left-color: #1f7a3d; }
.result-banner.is-valid .icon   { background: rgba(31, 122, 61, .12); color: #1f7a3d; }
.result-banner.is-expired { border-left-color: #b58100; }
.result-banner.is-expired .icon { background: rgba(181, 129, 0, .14); color: #b58100; }
.result-banner.is-none    { border-left-color: var(--np-crimson); }
.result-banner.is-none .icon    { background: rgba(200, 16, 46, .11); color: var(--np-crimson); }

.data-rows { list-style: none; margin: 0; padding: 0; }

.data-rows li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--np-line-2);
    font-size: 14px;
}

.data-rows li:last-child { border-bottom: 0; }
.data-rows .k { color: var(--np-text); flex: 0 0 auto; }
.data-rows .v { text-align: right; font-weight: 600; color: var(--np-ink); word-break: break-word; }

.data-group-title {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--np-crimson);
    font-weight: 700;
    margin: 20px 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--np-line);
}

.data-group-title:first-child { margin-top: 0; }

/* Photo and QR always stack; never inline, or they line up on wider phones. */
.holder-photo {
    display: block;
    width: 100%;
    max-width: 170px;
    margin: 0 auto;
    border: 1px solid var(--np-line);
    border-radius: 3px;
}

.qr-panel {
    display: block;
    width: 146px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--np-line);
    border-radius: 3px;
    padding: 8px;
    line-height: 0;
}

.qr-panel img { width: 128px; height: 128px; display: block; }

.pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 3px;
}

.pill.ok      { background: rgba(31, 122, 61, .13); color: #1f7a3d; }
.pill.expired { background: rgba(181, 129, 0, .16); color: #b58100; }

/* ---------------------------------------------------------------- footer */

.public-footer {
    background: var(--np-navy);
    color: rgba(255, 255, 255, .82);
    padding: 28px 0;
    font-size: 13px;
}

.public-footer strong { color: #fff; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 991.98px) {
    /* Rail stops sticking once it stacks above the content. */
    .rail { position: static; margin-bottom: 20px; }
}

@media (max-width: 767.98px) {
    .titleband { padding: 20px 0; }
    .titleband h1 { font-size: 1.3rem; }
    .page-body { padding: 22px 0 36px; }
    .block { padding: 18px; }
    .disclose { gap: 18px; }
    .data-rows li { flex-direction: column; gap: 2px; }
    .data-rows .v { text-align: left; }
}

/* ------------------------------------------------- header mark & footer */

/* Flag sits in a solid crimson block, separated from the name by a rule. */
.topbar .bar-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; }

.topbar .brand { display: flex; align-items: stretch; gap: 0; padding: 0; text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }

.flag-block {
    flex: 0 0 auto;
    background: var(--np-crimson);
    padding: 13px 14px;
    display: flex;
    align-items: center;
    line-height: 0;
}

.flag-block svg { width: 26px; height: auto; display: block; }

.topbar .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0 10px 15px;
    border-left: 1px solid var(--np-line);
}

.topbar .brand-text strong { display: block; font-size: 15px; color: var(--np-ink); line-height: 1.22; }
.topbar .brand-text span   { display: block; font-size: 11.5px; color: var(--np-text); }

.bar-links { display: flex; align-items: center; }

/* Footer: navy, with a crimson bar down the left of the mark. */
.public-footer { padding: 0; }

.foot-grid { display: flex; align-items: stretch; gap: 0; }

.foot-mark {
    flex: 0 0 auto;
    background: var(--np-crimson);
    padding: 26px 22px;
    display: flex;
    align-items: flex-start;
}

.foot-flag { line-height: 0; }
.foot-flag svg { width: 30px; height: auto; display: block; }

.foot-body { padding: 24px 0 24px 24px; }
.foot-name { color: #fff; font-weight: 700; font-size: 14.5px; margin: 0 0 4px; }
.foot-line { margin: 0 0 14px; font-size: 13px; max-width: 60ch; }
.foot-copy { margin: 0; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 12.5px; }

@media (max-width: 767.98px) {
    .topbar .bar-inner { align-items: center; }
    .foot-grid { flex-direction: column; }
    .foot-mark { padding: 16px 22px; }
    .foot-body { padding: 20px 22px; }
}

/* --------------------------------------------------- verification record */

/*
 * verify.php runs top to bottom in one narrow column: a centred masthead
 * carrying the photograph and the holder's name, then the particulars as a
 * single full-width ledger with the label in a fixed left gutter -- no
 * side-by-side split anywhere on the page. The QR code is deliberately absent:
 * it appears on the printed card only.
 *
 * Appended at the end of the file on purpose. Media queries carry no extra
 * specificity, so the mobile block for these rules follows them below.
 */

.record-mast {
    background: #fff;
    border: 1px solid var(--np-line);
    border-top: 3px solid var(--np-crimson);
    border-radius: 4px;
    padding: 28px 24px 24px;
    text-align: center;
    margin-bottom: 20px;
}

.mast-images {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 34px;
    margin-bottom: 20px;
}

.mast-fig { margin: 0; }

.mast-fig figcaption {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--np-text);
    margin-top: 10px;
}

.record-mast .holder-photo {
    display: block;
    width: 146px;
    height: auto;
    margin: 0;
    border: 1px solid var(--np-line);
    border-radius: 4px;
    background: #fff;
}

.record-mast .no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 146px;
    height: 146px;
    border: 1px dashed var(--np-line);
    border-radius: 4px;
    background: #fff;
    color: var(--np-text);
    font-size: 12px;
    text-align: center;
    padding: 8px;
}


.mast-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--np-ink);
    margin: 0 0 4px;
    line-height: 1.25;
    word-break: break-word;
}

.mast-no {
    margin: 0;
    font-size: 13.5px;
    letter-spacing: .07em;
    color: var(--np-text);
}

/* The ledger: one full-width run of rows, label in a fixed left gutter and
   the value left-aligned beside it. */
.ledger {
    background: #fff;
    border: 1px solid var(--np-line);
    border-radius: 4px;
    padding: 6px 24px 20px;
}

.ledger-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--np-crimson);
    margin: 22px 0 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--np-crimson);
}

.ledger .data-rows li {
    justify-content: flex-start;
    gap: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--np-line-2);
}

.ledger .data-rows .k {
    flex: 0 0 210px;
    padding-right: 18px;
    color: var(--np-text);
}

.ledger .data-rows .v {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
}

.verify-note {
    margin: 20px 0 0;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid var(--np-line);
    border-left: 3px solid var(--np-navy);
    border-radius: 4px;
    font-size: 13px;
    color: var(--np-text);
}

@media (max-width: 575.98px) {
    .record-mast { padding: 22px 18px 20px; }
    .ledger { padding: 4px 18px 16px; }
    .ledger .data-rows li { flex-direction: column; gap: 3px; }
    .ledger .data-rows .k { flex: 0 0 auto; padding-right: 0; font-size: 12.5px; }
}

/* ------------------------------------------------------ before you set off */

/*
 * Two rows inside a block, picture beside the message. Appended at the end of
 * the file with its own mobile block below -- media queries carry no extra
 * specificity, so reusing an earlier one would lose to these rules.
 */

.safety-row {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 20px 0;
    border-top: 1px solid var(--np-line-2);
}

.safety-row:last-child { padding-bottom: 0; }

.safety-media { flex: 0 0 216px; max-width: 216px; }

/* The placeholder and the real photograph are sized identically, so swapping
   one for the other changes nothing in the layout. */
.safety-media img {
    display: block;
    width: 100%;
    /* Square, not landscape: one source is portrait (376x531) and the other
       square (1080x1080). A 4:3 box would cut the top and bottom off the
       portrait one. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.safety-body { flex: 1 1 auto; min-width: 0; }

.safety-body h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--np-ink);
    margin: 0 0 8px;
    padding-left: 12px;
    border-left: 3px solid var(--np-crimson);
    line-height: 1.3;
}

.safety-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--np-text);
}

@media (max-width: 575.98px) {
    /* Picture over text rather than beside it -- at 216px wide against a
       narrow column the text runs to two or three words a line. */
    .safety-row { flex-direction: column; gap: 14px; }
    .safety-media { flex: 0 0 auto; max-width: 100%; width: 100%; }
}