/* =========================================================
   Reporting Fund — public donation page.
   Palette matches the rest of the site: #C8001F / #2459A3.
   ========================================================= */

.dn_hero {
    background: linear-gradient(180deg, #F5F8FD 0%, #FBFCFE 65%, #fff 100%);
    border-bottom: 1px solid #E8EDF5;
    padding: 54px 0 46px;
}
.dn_hero_inner { max-width: 760px; }

.dn_kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #E3DAF0;
    color: #C8001F;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.dn_title {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: #14284a;
}
.dn_title span { color: #C8001F; }

.dn_lead { margin: 0; font-size: 17px; line-height: 1.75; color: #4d4d4d; }

/* ── Layout ─────────────────────────────────────────────── */
.dn_layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    padding: 44px 0 74px;
}

.dn_panel {
    padding: 30px 30px 28px;
    background: #fff;
    border: 1px solid #E5E7EF;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(21, 57, 107, 0.07);
}
.dn_panel_title { margin: 0 0 22px; font-size: 22px; font-weight: 700; color: #14284a; }

/* ── Form ───────────────────────────────────────────────── */
.dn_group { border: 0; padding: 0; margin: 0 0 22px; }
.dn_group legend {
    padding: 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #55617A;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.dn_cadence, .dn_presets { display: flex; flex-wrap: wrap; gap: 9px; }
.dn_presets { margin-bottom: 12px; }

.dn_chip {
    padding: 10px 18px;
    border: 1.5px solid #DCE3EE;
    border-radius: 24px;
    background: #fff;
    color: #55617A;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.dn_chip:hover { border-color: #2459A3; color: #2459A3; }
.dn_chip.active { border-color: #C8001F; background: #C8001F; color: #fff; }
.dn_chip:focus-visible { outline: 3px solid #2459A3; outline-offset: 2px; }

/* Currency mark sits inside the field so the amount reads as money, not a
   number in a box next to a symbol. */
.dn_amount { position: relative; }
.dn_amount_cur {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    font-weight: 700;
    color: #14284a;
    pointer-events: none;
}
.dn_amount .dn_input { padding-left: 34px; font-size: 19px; font-weight: 700; color: #14284a; }

.dn_input {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #DCE3EE;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: #303030;
    transition: border-color .15s, box-shadow .15s;
}
.dn_input:focus {
    outline: none;
    border-color: #2459A3;
    box-shadow: 0 0 0 3px rgba(36, 89, 163, 0.12);
}
.dn_input:read-only { background: #F6F8FB; color: #6B7280; }
textarea.dn_input { resize: vertical; min-height: 84px; }

.dn_row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.dn_field { margin-bottom: 18px; min-width: 0; }
.dn_field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #55617A;
}
.dn_field label span { font-weight: 500; color: #9AA0A8; }

.dn_err { margin: 6px 0 0; font-size: 12.5px; color: #C8001F; font-weight: 600; }

.dn_check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    font-size: 14px;
    color: #55617A;
    cursor: pointer;
}
.dn_check input { margin: 0; cursor: pointer; }

.dn_submit {
    width: 100%;
    padding: 15px 24px;
    border: 0;
    border-radius: 26px;
    background: #C8001F;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(200, 0, 31, 0.22);
    transition: background .18s, transform .18s, box-shadow .18s;
}
.dn_submit:hover:not(:disabled) {
    background: #2459A3;
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(36, 89, 163, 0.26);
}
.dn_submit:disabled { opacity: .6; cursor: default; }

.dn_fineprint { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: #8A8F98; text-align: center; }

.dn_notice {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
}
.dn_notice.ok { background: #EAF7EE; border: 1px solid #BFE3CB; color: #2C6B3F; }
.dn_notice.error { background: #FDECEF; border: 1px solid #F3C3CC; color: #A5001A; }

/* ── Thank-you state ────────────────────────────────────── */
.dn_done { text-align: center; padding: 26px 10px 12px; }
.dn_done_tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #EAF7EE;
    color: #2C6B3F;
}
.dn_done h2 { margin: 0 0 10px; font-size: 24px; font-weight: 700; color: #14284a; }
.dn_done p { margin: 0; font-size: 15px; line-height: 1.7; color: #55617A; }

/* ── Aside ──────────────────────────────────────────────── */
.dn_aside { position: sticky; top: 96px; }
.dn_aside_title {
    position: relative;
    margin: 0 0 18px;
    padding-left: 15px;
    font-size: 21px;
    font-weight: 700;
    color: #14284a;
}
.dn_aside_title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    border-radius: 3px;
    background: #C8001F;
}

.dn_points { margin: 0 0 24px; padding: 0; list-style: none; }
.dn_points li {
    position: relative;
    margin-bottom: 18px;
    padding-left: 26px;
}
.dn_points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2459A3;
    box-shadow: 0 0 0 4px rgba(36, 89, 163, 0.12);
}
.dn_points strong { display: block; margin-bottom: 4px; font-size: 15px; color: #14284a; }
.dn_points span { font-size: 14px; line-height: 1.65; color: #6B7280; }

.dn_note {
    padding: 18px 20px;
    border: 1px solid #E5E7EF;
    border-left: 4px solid #2459A3;
    border-radius: 10px;
    background: #F7F9FC;
}
.dn_note strong { display: block; margin-bottom: 6px; font-size: 14.5px; color: #14284a; }
.dn_note p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #6B7280; }
.dn_note a { color: #2459A3; font-weight: 600; }
.dn_note a:hover { color: #C8001F; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
    .dn_layout { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 56px; }
    .dn_aside { position: static; }
    .dn_title { font-size: 32px; }
    .dn_hero { padding: 38px 0 34px; }
}

@media (max-width: 575px) {
    .dn_title { font-size: 26px; }
    .dn_lead { font-size: 15.5px; }
    .dn_panel { padding: 22px 18px 20px; }
    .dn_row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Shared-form additions ──────────────────────────────────
   The form is rendered by /donate, Support Journalism and the account area, so
   everything below has to stand on its own rather than lean on a page's layout. */
.dn_field label .req { color: #C8001F; margin-left: 2px; }

.dn_hint { margin: 6px 0 0; font-size: 12px; color: #9AA0A8; }

/* Dial code and number as one control: they are one phone number, and two boxes
   with a gap between them do not read that way. */
.dn_phone { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
.dn_phone .dn_dial { text-align: center; }

.dn_enquiry {
    padding: 20px 22px;
    border: 1px solid #E5E7EF;
    border-left: 4px solid #2459A3;
    border-radius: 10px;
    background: #F7F9FC;
}
.dn_enquiry p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: #55617A; }

.dn_submit.as_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 200px;
    text-decoration: none;
}

select.dn_input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355617A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* Support Journalism drops the form into its own page, which has no panel of its
   own around it. */
.sj_panel {
    margin: 0 0 60px;
    padding: 30px;
    background: #fff;
    border: 1px solid #E5E7EF;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(21, 57, 107, 0.07);
}

/* In the account area the form sits inside an existing card, so it must not add
   a second one. */
.dn_form.compact .dn_row { grid-template-columns: 1fr; gap: 0; }

@media (max-width: 575px) {
    .sj_panel { padding: 20px 16px; }
    .dn_phone { grid-template-columns: 74px minmax(0, 1fr); }
}