/* ============================================
   DPG Direct Debit Page - #tnc-directdebit-account
   ============================================

   SCOPE: Narrowly scoped to #tnc-directdebit-account form
   URL: /c/directdebitaccount

   RELATED JS: javascript.html (DOMContentLoaded handler)

   ============================================ */

/* TNEW injects an inline <style> block on this page that sets body { margin: 10px }.
   That inline style appears after our external stylesheets in the cascade, so it wins
   without !important — producing a white 10px gap on all four edges, including above
   the header. Override it here. */
body {
    margin: 0 !important;
}

/* Two-column paired field rows (name row + bank details row) */
#tnc-directdebit-account .dpg-dd-row--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    align-items: start;
    margin-bottom: 15px;
}


/* Mobile: stack to single column */
@media (max-width: 767px) {
    #tnc-directdebit-account .dpg-dd-row--two-col {
        grid-template-columns: 1fr;
        row-gap: 15px;
    }
}

/* Billing schedule: constrain to one column width */
#tnc-directdebit-account [data-control-group-for="BillingSchedule"] {
    max-width: calc(50% - 12px);
}

/* Hide the Back/Cancel button */
#tnc-cancel {
    display: none !important;
}

/* Submit button: right-align within its direct parent container */
#tnc-directdebit-account .dpg-dd-submit-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 32px;
}

/* Bootstrap's col-sm-6 on the inner .component-actions div sets flex: 0 0 50%,
   which places the button at 50% (centre) instead of the right edge.
   Override to auto-width so justify-content: flex-end can push it flush right. */
#tnc-directdebit-account .dpg-dd-submit-row .component-actions {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}