/*Donation Progress*/
.donation-progress {
    font-family: var(--mono);
    color: var(--ink-soft);
}

.progress-card {
    padding: 15px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background-color: var(--bg-soft);
}

.progress-card strong {
    color: var(--ink);
    font-size: 21px;
}

.progress-indicator {
    height: 18px;
    margin: 12px 0 12px;

    background-color: var(--bg-grey);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    width: 0;
    height: 100%;

    border-radius: 5px;

    background-color: var(--green);
}

.progress-information {
    display: flex;
    justify-content: space-between;
}

.progress-footer {
    margin-top: 15px;

    display: flex;
    justify-content: space-between;
    align-items: baseline;

    font-size: 8px;
}

/*receipt Form*/
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 10px 0;

    cursor: pointer;
}
.checkbox-row:hover input {border-color: var(--red-soft);}

.checkbox-row input{
    appearance: none;
    -webkit-appearance: none;
    
    width: 18px;
    height: 18px;
    min-width: 18px;

    border: 1px solid var(--ink-soft);
    border-radius: 4px;

    display:grid;
    place-content:center;

    cursor: pointer;
}
.checkbox-row input::before{
    content: "";
    width: 10px;
    height: 10px;

    border-radius: 2px;

    background:var(--red);
    
    transform:scale(0);
    transition:transform .12s ease-out;
}
.checkbox-row input:checked::before{transform:scale(1);}
.checkbox-row input:checked{border-color:var(--red);}

.receipt-form {
    display: grid;
    grid-template-rows: 0fr;

    padding-inline: 15px;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: transparent;

    transition: grid-template-rows .35s ease,
                padding-block .35s ease,
                border-color .3s ease,
                background-color .3s ease;
}

.receipt-form.open {
    grid-template-rows: 1fr;
    padding-block: 15px;
    border-color: var(--rule);
    background-color: var(--bg-soft);
}

.receipt-form-inner {
    overflow: hidden;
    min-height: 0;
}


.receipt-form .field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-bottom: 10px;
}

.field label {
    font-family: var(--mono);
    font-weight: bold;
}

.field input {
    appearance:none;
    -webkit-appearance:none;

    width:100%;
    background:var(--bg-grey);
    border:1px solid var(--rule);
    border-radius:5px;

    color: var(--ink);
    font-weight: 500;
    font-family: var(--mono);
    padding: 5px;

    outline: none;
}
.field input:focus{
    border-color: var(--red);
}
.field input::placeholder{color: var(--ink-soft);}

.hint {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-soft);
    margin: 0;
}



/*Donation Card*/
.donation-info {
    display: grid;
    grid-template-columns: 0.9fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.inline-icon.material-symbols-outlined {
    font-size: 15px;
    color: var(--ink-soft);
    vertical-align: text-bottom;
}

.bank-card {
    padding: 15px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background-color: var(--bg-soft);
    align-self: end;
}

.bank-card-top {
    font-family: var(--serif);
    font-size: 20px;
    font-style: italic;
    color: var(--ink);
    line-height: 0.86;

    padding: 0 0 10px;
    border-bottom: 2px dotted var(--ink-soft);
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    padding: 13px 0;
    border-bottom: 1px solid var(--rule);

    font-family: var(--mono);
}

.label {
    font-weight: bold;
    color: var(--ink-soft);
}

.value {
    text-align: right;
    color: var(--ink);
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;
    padding: 0 0 0 5px;

    border: 1.8px none;
    border-radius: 5px;

    background: none;
    cursor: pointer;
    vertical-align: middle;
}

.copy-btn .material-symbols-outlined {
    font-size: 15px;
    color: var(--ink-soft);
}

.copy-btn:hover .material-symbols-outlined {
    color: var(--green);
}


/*Responsive*/
@media (max-width: 800px) {
    .donation-info {
        grid-template-columns: 1fr;
        gap:15px;
    }
}