:root {
    --crl-color: #6C1319;
}

/* Headings */
h3, h4, h5, .fw-bold {
    color: var(--crl-color) !important;
}

/* Primary button */
.btn-primary {
    background-color: var(--crl-color) !important;
    border-color: var(--crl-color) !important;
}
.btn-primary:hover {
    background-color: #5a0f14 !important;
}

/* Outline primary + checked radios */
.btn-outline-primary {
    color: var(--crl-color) !important;
    border-color: var(--crl-color) !important;
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary:hover {
    background-color: var(--crl-color) !important;
    border-color: var(--crl-color) !important;
    color: #fff !important;
}

/* Add / Remove buttons */
.btn-outline-success {
    border-color: var(--crl-color) !important;
    color: var(--crl-color) !important;
}
.btn-outline-success:hover {
    background-color: var(--crl-color) !important;
    color: #fff !important;
}
.btn-outline-danger {
    border-color: var(--crl-color) !important;
    color: var(--crl-color) !important;
}
.btn-outline-danger:hover {
    background-color: var(--crl-color) !important;
    color: #fff !important;
}

/* Checkbox */
.form-check-input:checked {
    background-color: var(--crl-color) !important;
    border-color: var(--crl-color) !important;
}

/* Divider */
hr {
    border-top: 2px solid var(--crl-color) !important;
}

.donation-hero img {
    width: 100%;
    aspect-ratio: 4/3;   /* keeps beautiful ratio */
    object-fit: cover;
    border-radius: 8px;
}

/* ============================
   FORM LABELS (Donation Type, Country, etc.)
============================= */
.donation-label,
.donation-inline-row label,
.form-label {
    color: var(--crl-color) !important;
    font-weight: 600;
}

/* ============================
   FORM SELECTS + INPUTS
============================= */
.donation-select,
.form-select,
.amount-field,
.form-control {
    border: 1.5px solid var(--crl-color) !important;
    color: #333;
    border-radius: 6px !important;
}

.donation-select:focus,
.form-select:focus,
.amount-field:focus,
.form-control:focus {
    border-color: var(--crl-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(108,19,25,0.25) !important;
}

/* Section headers: Donation Details, Your Details */
.section-title {
    font-size: 1.35rem !important;     /* bigger */
    font-weight: 700 !important;        /* bolder */
    color: var(--crl-color) !important; /* theme colour */
    margin-bottom: 0.75rem !important;
}

.form-select, .form-control{
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}