/* Public appointment tracker — page-specific styles only.
   The chrome (top bar, masthead, footers, accessibility modes) lives in
   assets/css/gov.css, shared by every public GWTD page. */

.card-title { font-size: calc(21px * var(--gov-font-scale)); margin: 0 0 8px; }

.lead { color: var(--gov-muted); margin: 0 0 24px; }

label { display: block; font-size: calc(14px * var(--gov-font-scale)); font-weight: 600; margin-bottom: 6px; }
.hint { display: block; font-weight: 400; color: var(--gov-muted); font-size: calc(13px * var(--gov-font-scale)); margin-top: 2px; }

input[type=text] {
    width: 100%;
    padding: 12px 14px;
    font-size: calc(16px * var(--gov-font-scale));   /* >=16px stops iOS zooming on focus */
    border: 2px solid #9ca3af;
    border-radius: 6px;
    margin-bottom: 20px;
    font-family: inherit;
    background: #fff;
    color: var(--gov-ink);
}
input[type=text]:focus { border-color: var(--gov-blue); }
#reference_no { font-family: Consolas, 'Courier New', monospace; letter-spacing: .5px; text-transform: uppercase; }

button[type=submit] {
    width: 100%;
    padding: 14px;
    font-size: calc(16px * var(--gov-font-scale));
    font-weight: 700;
    color: #fff;
    background: var(--gov-blue);
    border: 2px solid var(--gov-blue);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
button[type=submit]:hover { background: #002a80; border-color: #002a80; }

.alert {
    padding: 13px 15px;
    border-radius: 6px;
    border-left: 5px solid var(--gov-red);
    background: #fef2f2;
    color: #8c0d1c;
    margin-bottom: 22px;
}

/* ── Result ─────────────────────────────────────────────────────────── */

.result-head { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--gov-line); margin-bottom: 4px; }
.ref-label  { font-size: calc(12px * var(--gov-font-scale)); color: var(--gov-muted); text-transform: uppercase; letter-spacing: .7px; margin: 0; }
.ref-number { font-family: Consolas, 'Courier New', monospace; font-size: calc(23px * var(--gov-font-scale)); font-weight: 700; margin: 5px 0 15px; }

/* Status is never colour-only — each pill carries its own wording too (WCAG 1.4.1). */
.status-pill { display: inline-block; padding: 8px 20px; border-radius: 20px; font-size: calc(15px * var(--gov-font-scale)); font-weight: 700; border: 2px solid transparent; }
.st-p { background: #fef3c7; color: #7c4a03; border-color: #b45309; }
.st-a { background: #dcfce7; color: #14532d; border-color: #15803d; }
.st-r { background: #fee2e2; color: #7f1d1d; border-color: #b91c1c; }
.st-c { background: #e0e7ff; color: #312e81; border-color: #3730a3; }

.status-note { color: var(--gov-muted); margin: 13px 0 0; }

.details { margin: 0; }
.detail  { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gov-line); }
.detail:last-child { border-bottom: none; }
.detail dt { color: var(--gov-muted); margin: 0; }
.detail dd { font-weight: 600; text-align: right; margin: 0; }

.remarks {
    background: #fffbeb;
    border-left: 5px solid #b45309;
    border-radius: 6px;
    padding: 13px 15px;
    margin-top: 18px;
    color: #713f12;
}

.again { display: block; text-align: center; margin-top: 24px; font-weight: 600; color: var(--gov-blue); }

.privacy { font-size: calc(13px * var(--gov-font-scale)); color: var(--gov-muted); margin-top: 22px; text-align: center; }

@media (max-width: 560px) {
    .detail { flex-direction: column; gap: 2px; }
    .detail dd { text-align: left; }
}

/* ── Cancellation ───────────────────────────────────────────────────── */

.notice-ok {
    padding: 13px 15px;
    border-radius: 6px;
    border-left: 5px solid #15803d;
    background: #f0fdf4;
    color: #14532d;
    margin-bottom: 22px;
    line-height: 1.6;
}

.cancel-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gov-line); }

/* Destructive, so it reads as a secondary action rather than competing with
   the primary one — outlined, not filled. */
.cancel-btn {
    width: 100%;
    padding: 12px;
    font-size: calc(15px * var(--gov-font-scale));
    font-weight: 700;
    font-family: inherit;
    color: #b91c1c;
    background: #fff;
    border: 2px solid #b91c1c;
    border-radius: 6px;
    cursor: pointer;
}
.cancel-btn:hover { background: #b91c1c; color: #fff; }

.cancel-note {
    font-size: calc(13px * var(--gov-font-scale));
    color: var(--gov-muted);
    text-align: center;
    margin: 10px 0 0;
}

/* 'cancelled' status pill — grey, and labelled, never colour alone. */
.st-x { background: #f3f4f6; color: #374151; border-color: #6b7280; }