/* ============================================
   VRIC Donation Entry Form — Flow runtime styling
   Linked from the Donation1 site head markup.
   ============================================ */

body,
.dxp_runtime-app {
    background: #f4f6f9;
    font-family: 'Salesforce Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* The flow sits in a white card, centred, sized for a phone first */
dxp_flow-flow {
    display: block !important;
    max-width: 560px !important;
    margin: 0.5rem auto !important;
    padding: 1rem 1.25rem 1.25rem !important;
    background: #ffffff !important;
    border: 1px solid #dddbda !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

/* ---- Header text from the DisplayText component ---- */
dxp_flow-flow p strong {
    color: #0b5cab;
    font-size: 1rem;
}

dxp_flow-flow p {
    color: #5c5c5c;
    line-height: 1.4;
    margin: 0 0 0.25rem;
}

/* ---- Labels and inputs ---- */
.slds-form-element__label {
    font-weight: 600 !important;
    color: #181818 !important;
    font-size: 0.8125rem !important;
    margin-bottom: 0.15rem !important;
}

.slds-required {
    color: #ba0517 !important;
}

.slds-input,
.slds-textarea,
.slds-combobox__input,
.slds-select {
    border: 1px solid #c9c7c5 !important;
    border-radius: 4px !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.95rem !important;
}

.slds-input:focus,
.slds-textarea:focus,
.slds-combobox__input:focus,
.slds-select:focus {
    border-color: #0b5cab !important;
    box-shadow: 0 0 0 1px #0b5cab !important;
    outline: none !important;
}

/* Notes and address boxes stay short; they are optional */
.slds-textarea {
    min-height: 2.75rem !important;
}

/* Tighter rhythm than the flow default, so the form fits a phone screen */
.slds-form-element {
    margin-bottom: 0.6rem !important;
}

/* ---- Radio groups: pill buttons, two per row ---- */
.slds-form-element__control .slds-radio_button-group,
.slds-form-element .slds-form-element__control > .slds-radio:first-of-type {
    margin-top: 0.15rem;
}

.slds-form-element__control:has(.slds-radio) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.slds-radio {
    margin: 0 !important;
}

.slds-radio .slds-radio__label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    margin: 0 !important;
    padding: 0.25rem 0.5rem;
    border: 1px solid #c9c7c5;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}

/* Hide the dot; the whole pill is the target */
.slds-radio .slds-radio_faux {
    display: none !important;
}

.slds-radio .slds-form-element__label {
    margin: 0 !important;
    color: #0b5cab !important;
    font-size: 0.875rem !important;
    text-align: center;
    line-height: 1.2;
}

.slds-radio [type="radio"]:checked + .slds-radio__label {
    background: #0b5cab;
    border-color: #0b5cab;
}

.slds-radio [type="radio"]:checked + .slds-radio__label .slds-form-element__label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.slds-radio [type="radio"]:focus + .slds-radio__label {
    outline: 2px solid #0b5cab;
    outline-offset: 2px;
}

/* ---- Footer button: full width, easy to hit ----
   The button lives inside lightning-button's shadow root, so size it through
   the host element and SLDS styling hooks rather than the inner button. */
flowruntime-navigation-bar.navigationBar,
flowruntime-navigation-bar .footerContainer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem 0 0 !important;
}

flowruntime-navigation-bar .navigation-bar__right-align {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

lightning-button.flow-button__NEXT,
lightning-button.flow-button__FINISH {
    display: block !important;
    width: 100% !important;
    --slds-c-button-brand-color-background: #0b5cab;
    --slds-c-button-brand-color-border: #0b5cab;
    --slds-c-button-brand-color-background-hover: #084a8a;
    --slds-c-button-brand-color-border-hover: #084a8a;
    --slds-c-button-sizing-height: 2.75rem;
    --slds-c-button-font-size: 1rem;
}

lightning-button.flow-button__NEXT::part(button),
lightning-button.flow-button__FINISH::part(button) {
    width: 100%;
    height: 2.75rem;
    font-size: 1rem;
}

/* ---- Errors ---- */
.slds-form-element__help,
.slds-has-error .slds-form-element__help {
    font-size: 0.8125rem !important;
    color: #ba0517 !important;
}

/* ---- Phone ---- */
@media (max-width: 480px) {
    dxp_flow-flow {
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 0.75rem 0.875rem 1rem !important;
    }
}